如何在 Angular 根组件中添加模板？

Question

我想在我的 Angular 应用程序中独立于用户当前所在的组件播放背景音乐。为此，我需要在根组件中动态创建一个组件 (musicComponent)，而不是在用户单击按钮以激活音乐的子组件中。

@ViewChild('m', {static : false, read: ViewContainerRef }) musicentry: ViewContainerRef;


ngAfterViewInit(){
const factory = this.resolver.resolveComponentFactory(BackgroundMusicComponent);
this.MusicComponentRef = this.musicentry.createComponent(factory);

}

模板：

<template #m></template>

不幸的是，如果模板位于子组件内，则 FactoryResolver 可以工作，但如果模板位于根组件 (app.component.html) 内，则 FactoryResolver 无法工作。

您知道如何在根组件中创建组件吗？谢谢！

Answer 1

你说的是动态组件。你可以试试这个

@Directive({
  selector: '[appAdHost]'
})
export class AdHostDirective {

  constructor(public viewContainerRef:ViewContainerRef) { }
}

在页面上

<ng-template appAdHost></ng-template>

逻辑

  @ViewChild(AdHostDirective) dlHost: AdHostDirective;

  constructor(private cfr: ComponentFactoryResolver) {
  }

  ngAfterViewInit() {
    this.dlHost.viewContainerRef.createComponent(
      this.cfr.resolveComponentFactory(DyTwoComponent)
    );
  }

如何在 Angular 根组件中添加模板？

How to add in Angular a template in the Root Component?

templates

factory

reference

viewchild

angular