如何将JSON对象传递给有角度的自定义元素

Question

我使用CUSTOM_ELEMENTS_SCHEMA在angular 7中创建了一个自定义元素。我的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);
  }
}

Check out the working example

Answer 2

[]中应该有一个footer-data，可能需要一个changeDetectRef才能在更改后重新检查该值。

步骤1ng new testing

第2步ng g c footer

第3步在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() { }
}

app.component.html中的步骤4

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

app.component.ts中的步骤5

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

footer.component.ts中的第6步

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

footer.component.html中的步骤7

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

Answer 3

@@ Ebin Manuval：在html包装程序中使用时，我总是以字符串形式获取输入数据。它不被视为对象。有任何建议。