小编Pra*_*nth的帖子

我使用 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 对象可以传递给我的自定义元素吗？

如何使用 angular2 Validator.pattern 为 DD/MM/YYYY 格式的日期添加验证模式。

我有“必需的”验证器。找不到日期模式。代码如下：

this.txtDob = new Control("", Validators.compose([Validators.required]));

我的.ts文件中有以下代码.

yourInfoData: IYourInfoData; //IYourInfoData is my constructor

getYourInfoData() {
  $this = this;
  $this.yourInfoData = yourInfoDataResponse; //yourInfoDataResponseis my response from service.
}

yourInfoDataResponses结构如下:

yourInfoDataResponse{
  "firstName" : "Xyz",
  "lastName" : "Abc"
}

我可以直接访问this.yourInfoData以与html输入值绑定,如下所示:

<input type="text" [(ngModel)]="yourInfoData.firstName">

这样做,我收到一个错误

找不到undefined的firstName.

有人能指出我在这里缺少什么.或者,还有其他方法来实现这一目标.