时间戳

首页 > 解决方案 > 将数据传递给 Angular 元素组件

angular - 将数据传递给 Angular 元素组件

问题描述

鉴于我有一个组件，我想将其导出并用作独立的 angular-element-component。

export class CompanyFormComponent implements OnInit {

@Input() public companyId: string;
company: Company;
companyForm: FormGroup;



constructor(
    private companyService: CompanyService,
    private fb: FormBuilder,
  ) { }

ngOnInit() {

if (!this.companyId || this.companyId.length === 0) {
  console.log('Please provide an Id');
}

……

应用模块：

    export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const strategyFactory = new ElementZoneStrategyFactory(CompanyFormComponent, this.injector);
    const element = createCustomElement(CompanyFormComponent, { injector: this.injector, strategyFactory });
    customElements.define('app-company-form', element);
  } 
}

索引.html：

<app-company-form></app-company-form>

我希望能够在我使用这个组件的任何地方注入任何值，就像这样简单：

<app-company-form companyId=11></app-company-form>

所以 companyId 可以从另一个地方填充，完全在 Angular 之外。我不想硬编码角度内的值。

我尝试了几件事，但似乎没有任何效果。

标签： angulartypescriptelementcustom-element

解决方案

当您将组件用作自定义/角度元素时，您可以通过将以下 html 属性添加到自定义元素来传递 companyId 输入参数。

<app-company-form company-id="11"></app-company-form>

推荐阅读