在模板中呈现动态变化的组件

Posted 2023-02-23

【中文标题】在模板中呈现动态变化的组件

【英文标题】：Rendering dynamically changing components in a template

【发布时间】：2019-06-15 00:16:55

【问题描述】：

我想在 ion-slide 容器内动态呈现自定义组件。而且我希望能够指定应该在模板之外使用的组件，例如在我的组件的列表中以使其可配置。

一些组件：

@Component(
  selector: 'myComponent',
  templateUrl: 'myComponent.html'
)
export class MyComponent 

  constructor() 
  

我的主页：

@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class 

  pages = [
    
      name: "some page",
      template: "<myComponent></myComponent>"
    ,
    
      name: "some other page",
      template: "<myComponent></myComponent>"
    
  ]

  @ViewChild(Slides) slides: Slides;

  constructor(private navCtrl: NavController) 
  

还有我的主页模板：

<ion-content padding>

  <ion-slides
    #slides
    [autoplay]="10*1000"
    loop="true"
  >
    <ion-slide *ngFor="let page of pages">
       page.name 
      <div [innerHTML]="page.template"></div>
    </ion-slide>
  </ion-slides>

</ion-content>

问题是在模板中使用innerHtml 似乎不起作用。我试图在div 中注入的模板似乎被吞没了，并且组件没有被渲染。

那么我如何在我的模板中注入一个组件而不显式地将它添加到模板中，而是将它添加到我的主页内的列表甚至配置文件中？

【参考方案1】：

使用ng-sanitize 和ng-bind-html 以便计算和呈现innerHTML 表达式。 ngBindHtml 或者只是实际使用组件作为您这样做的方式，据我所知，这似乎以一种不一定重要的方式规避了组件的实用性，但从您发布的代码中绝对可以。 即

<ion-slide *ngFor="let page of pages" ng-switch="page.name">
<myComponent ng-switch-when="some page"/>
<myComponent1 ng-switch-when="some other page"/>
</ion-slide>

还有其他方法可以解决这个问题。