Как передать объект JSON в угловые пользовательские элементы

Question

Я создал пользовательский элемент в 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 в мой пользовательский элемент?

Answer 1

Пользовательские элементы предназначены для использования вне угловой обертки, даже если вы можете использовать их внутри угловой обертки.когда вы используете их вне угловой обертки, вам нужно использовать это так:

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

значение атрибута должно быть строковым, если вы передаете json, строка json должна быть строго отформатирована.

Когдавы используете его внутри угловой обертки, вы можете использовать его с угловым селектором и можете передавать данные как тот же старый метод.

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

файл custom 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);
  }
}

Проверьте рабочий пример

Answer 2

В вашем footer-data должно быть [], и может потребоваться changeDetectRef, необходимый для повторной проверки значения после изменений.

Шаг 1 ng new testing

Шаг 2ng g c footer

Шаг 3 In app.module.ts

import { createCustomElement } from '@angular/elements';
import { FooterComponent } from './footer/footer.component';
...
@NgModule({
  declarations: [AppComponent, FooterComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [FooterComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { 
  constructor(private injector: Injector) {
    const customElement = createCustomElement(FooterComponent, { injector });
    customElements.define('some-component', customElement);
  }
  ngDoBootstrap() { }
}

Шаг 4 In app.component.html

<some-component [data]="footerInputData"></some-component>

Шаг 5 In app.component.ts

...
export class AppComponent {
   footerInputData = {"testing": "abc"}
}

Шаг 6 In footer.component.ts

import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit, AfterViewChecked {

  @Input() public data: any;
  displayedData = ""

  constructor(
    private cdRef:ChangeDetectorRef
  ) { }

  ngOnInit() {

  }

  ngAfterViewChecked()  {
    this.displayedData = this.data
    this.cdRef.detectChanges();
  }
}

Шаг 7 In footer.component.html

<p>
  {{ displayedData | json }}
</p>