Angular 7 动态加载@Component

Question

我正在尝试将组件动态添加到我的 @Component 模板中，这些组件正在填充，但是当我更改“buttonstring”变量时工具栏不会更改。

我有一个组件..

@Component({
selector: 'map-toolbar-action',
template:'<p style="position: absolute;z- 
index:5000">' + mapValues.buttonString + 
'</p>',
styleUrls: ['./map-toolbar- 
action.component.scss']
})
export class MapToolbarActionComponent 
implements OnInit {

constructor() {
mapValues.buttonString = 
mapValues.arrayToString(mapValues.buttons);
}

ngOnInit() {
}

}

我有一个带有这些元素的单身人士......

public static buttonString = "<component1></component1><component2></component2><component3></component3>";

我希望我可以更改 buttonString 以添加、减去或完全替换组件列表，并且工具栏会更新。

buttonString = "<component2></component2><component3></component3>";
buttonString = "<component1></component1><component2></component2><component3></component3><component4></component4>";
buttonString = "<componentA></componentA><componentB></componentB><componentC></componentC>;

这会反过来将组件更新到模板，但它不是那样工作的......我该如何完成？

任何帮助是极大的赞赏！！

Answer 1

您无法使用您尝试的方式更改模板。该模板在应用程序的最初阶段仅被读取一次。我想您可以使用 *ngIf 或使用ComponentFactoryResolver “动态添加组件”来实现它。要动态添加组件，首先，您需要在模块的“entryComponents”中声明

  entryComponents:[HelloComponent]

然后，创建一个 .html 像

<ng-template #container>
</ng-template>

你的 main.component.ts

  @ViewChild('container', { static: true, read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit()
  {
    this.entry.clear();
    const factory = this.resolver.resolveComponentFactory(HelloComponent);
    const componentRef = this.entry.createComponent(factory);
    componentRef.instance.name = this.name;
  }

请参阅stackblitz中的一个简单示例