Question

我想在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中的模板似乎被吞噬了，并且该组件未呈现。

那么我如何在不显式地将其添加到模板中，而是将其添加到我的HomePage甚至配置文件中的列表中的情况下，将其注入模板中？

Answer 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>

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

渲染模板中的动态更改组件

1 个答案: