Website-Suche

javascript - Wie man ein JSON-Objekt an Angular-Custom-Elemente übergibt

Ich habe ein benutzerdefiniertes Element in Angular 7 unter Verwendung von CUSTOM_ELEMENTS_SCHEMA erstellt. Meine app.module.ts sieht wie folgt aus:

    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);
  }
}

Ich habe diese benutzerdefinierten Elemente in meiner app.component.html wie unten aufgeführt referenziert:

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

Diese footerInputData wird in meiner Datei app.component.ts als Zeichenkette referenziert.

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

Innerhalb des HTML meines benutzerdefinierten Elements habe ich Interpolation verwendet, um die als Eingabe übergebenen Daten anzuzeigen.

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

Wenn die Seite geladen wird, sehe ich das Objekt nicht angezeigt. Stattdessen wird 'footerInputData' angezeigt.

Wie kann ich mein benutzerdefiniertes Element dazu bringen, die Daten aus meiner app.component.ts-Datei abzurufen, anstatt die Daten als Zeichenkette anzuzeigen.

Können JSON-Objekte also an mein benutzerdefiniertes Element übergeben werden?

Antwort #1

Benutzerdefinierte Elemente sollen außerhalb der Angular-Hülle verwendet werden, obwohl Sie sie auch innerhalb der Angular-Hülle verwenden können. Wenn Sie sie außerhalb der Angular-Hülle verwenden, müssen Sie sie so verwenden.

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

Der Attributwert sollte in eine Zeichenkette umgewandelt werden; wenn Sie JSON übergeben, sollte die JSON-Zeichenkette strikt formatiert sein.

Wenn Sie es innerhalb des Angular-Wrappers verwenden, können Sie es mit dem Angular-Selektor verwenden und Daten auf die gleiche alte Methode übergeben.

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

benutzerdefinierte Component.ts-Datei

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

app.modul.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);
  }
}

Schau dir das funktionierende Beispiel an

Antwort #2

Dies war der einzige Weg, wie ich das für mich zum Laufen gebracht habe, ich hoffe, das könnte euch helfen: Hinweis: Jedes Mal, wenn ihr den Attributwert ändert, wird der TypeScript-Code ausgelöst:

<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>

Dies ist, was in meiner .ts-Datei steht:

@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);
   }
}

Verwandte Artikel