javascript - วิธีส่งอ็อบเจ็กต์ JSON ไปยังองค์ประกอบกำหนดเองของ Angular

ฉันได้สร้างองค์ประกอบแบบกำหนดเองใน Angular 7 โดยใช้ CUSTOM_ELEMENTS_SCHEMA ไฟล์ app.module.ts ของฉันเป็นดังนี้:

    export class AppModule {
     constructor(private injector: Injector) {}
     ngDoBootstrap() {
       this.registerCustomElements();
     }

    registerCustomElements() {
      const HeaderElement = createCustomElement(AppComponent, {
        injector: this.injector
      });
      const FooterElement = createCustomElement(BcAngFooterComponent, {
        injector: this.injector
      });
      customElements.define("header-element", HeaderElement);
      customElements.define("footer-element", FooterElement);
  }
}

ฉันได้อ้างอิงถึงองค์ประกอบที่กำหนดเองเหล่านี้ในไฟล์ app.component.html ของฉันดังนี้:

<footer-element footer-data="footerInputData"></footer-element>

footerInputData นี้ถูกอ้างอิงในไฟล์ app.component.ts ของฉันในรูปแบบสตริง

 export class AppComponent {
  footerInputData: any = {title: "Page Title"};
}

ภายใน HTML ขององค์ประกอบที่ปรับแต่งเองของฉัน ฉันได้ใช้การแทรกตัวแปรเพื่อแสดงข้อมูลที่ส่งไปให้เป็นอินพุต

<div class="nav-list-wrap">
        {{footerData}}
</div>

เมื่อหน้าเพจโหลด ฉันไม่เห็นวัตถุที่แสดง แทนที่จะแสดง มันกำลังแสดง 'footerInputData'

วิธีทำให้คอมโพเนนต์ที่สร้างเองดึงข้อมูลจากไฟล์ app.component.ts ของฉัน แทนที่จะโชว์ข้อมูลเป็นสตริง

นอกจากนี้ สามารถส่งวัตถุ JSON ไปยังองค์ประกอบที่กำหนดเองของฉันได้หรือไม่?

คำตอบ #1

องค์ประกอบที่กำหนดเองถูกตั้งใจให้ใช้ภายนอกตัวห่อแองกูลา แม้ว่าคุณสามารถใช้พวกมันภายในตัวห่อแองกูลาก็ตาม เมื่อคุณใช้พวกมันภายนอกตัวห่อแองกูลา คุณจะต้องใช้มันแบบนี้

<footer-element name='{"title": "Page Title"}'></footer-element> 

ค่าของแอตทริบิวต์ควรถูกเปลี่ยนเป็นสตริง หากคุณกำลังส่ง JSON สตริงของ JSON ควรถูกฟอร์แมตอย่างเข้มงวด

เมื่อคุณใช้มันภายใน Angular wrapper คุณสามารถใช้มันกับตัวเลือก Angular และสามารถส่งข้อมูลได้เหมือนวิธีเก่า

<app-custom [name]="name"></app-custom>
//ts file
name = {title:"this is title"}

ไฟล์ component.ts แบบกำหนดเอง

@Component({
  selector: 'app-custom',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  @Input() name: any;
}

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, MainComponent],
  entryComponents:[
    AppComponent, MainComponent
  ]
})
export class AppModule {
  constructor(private injector: Injector) { }
  ngDoBootstrap() {
    //bootstraping angular app
    const AppElement = createCustomElement(MainComponent, { injector: this.injector });
    customElements.define('my-app', AppElement);

    //bootstraping custom element
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('footer-element', el);
  }
}

ดูตัวอย่างที่ทำงานได้

คำตอบ #2

นี่เป็นวิธีเดียวที่ทำให้มันใช้งานได้สำหรับฉัน หวังว่านี่อาจช่วยพวกคุณได้: หมายเหตุ: ทุกครั้งที่คุณเปลี่ยนค่าของแอตทริบิวต์ โค้ดไทป์สคริปต์จะถูกเรียกใช้งาน:

<body>
 <my-element settings=""></my-element>
 <script>
    var myConfig = {name: "oswaldo"}

    var element = document.getElementsByTagName("my-element")[0];
    if(element){
      element.setAttribute("settings", JSON.stringify(myConfig));
    }
  </script>
</body>

นี่คือสิ่งที่อยู่ในไฟล์ .ts ของฉัน:

@Component({
  selector: 'my-element',
  templateUrl: './my-element.component.html',
  styleUrls: ['./my-element.component.less']
})
export class MyElementComponent implements OnInit {

  @Input('settings') set settings(init: any) {
    if (init) {
      const myset = JSON.parse(init);
      console.log(myset.name);
   }
}