Question

这个问题有点类似于读取相同的问题，但是对于Angular 2，How can I use/create dynamic template to compile dynamic Component with Angular 2提出的解决方案在这一点上是过时的，那里的方法现在甚至不存在。所以基本上我的问题是这个。

我正在从服务加载HTML，HTML带有这样的链接：

<a routerLink='/content' (click)="loadHTMLData(pageId)">

因此，为了将其正确地加载到我认为的容器中，我需要即时创建一个组件并将其templateHTML属性也动态设置为接收到的HTML，以便（单击）事件起作用。

我的想法是创建此动态组件，以便它们具有事件处理程序，该事件处理程序将触发事件（@Output），并带有通知，然后由主机组件捕获，该通知随后将对返回该服务的服务执行另一个调用。 HTML，并使用新加载的HTML将此组件替换为新组件，并且每次在内容中按下链接时都会重复此过程。

我已经按照https://angular.io/guide/dynamic-component-loader中的说明设置了动态创建组件的功能，所以现在我有了一个动态组件，但是我不知道如何加载HTML作为其模板并正确呈现。（现在，模板呈现为字符串文字）

我尝试通过使用[innerHTML]将HTML传递到静态模板，方法是先对其进行设置以信任内容的设置进行消毒，但是这也不起作用，解释了html和样式，但是链接不起作用。 / p>

最相关的代码如下：

@Component({
  selector: 'app-content-info',
  templateUrl: './content-info.component.html',
  styleUrls: ['./content-info.component.css']
})
export class ContentInfoComponent implements OnInit {
  @Input() info: ContenInfo;

  @ViewChild(ContentInfoDirective,{static:true}) cInfoD: ContentInfoDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }

  loadComponent() {
    const Item = this.info;
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(Item.component);

    const viewContainerRef = this.cInfoD.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = Item.data;
  }

}

我从Angular文档站点（ad-banner.component.ts）改编了此文档，但是标准文档没有说明如何动态添加模板。

因此，基本上我需要知道的是如何在Angular 8的此动态组件中将HTML模板及其（单击）事件注入/插入，以使事件起作用？

有效答案将立即标记为正确。

如何使用/创建动态模板以使用Angular 8编译动态组件？

0 个答案: