Рендеринг динамически меняющихся компонентов в шаблоне - PullRequest
Новая
       25

Рендеринг динамически меняющихся компонентов в шаблоне

0 голосов
/ 21 января 2019

Я хочу динамически визуализировать пользовательские компоненты внутри контейнера 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 или даже в файле конфигурации?

1 Ответ

0 голосов
/ 22 января 2019

Используйте 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>

Есть и другие способы, к которым это может быть достигнуто.

...