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 中的一个简单示例