динамическое значение ngtemplate для выбора шаблона

Этот вопрос связан с ngTemplateOutlet с динамическим значением

Следуя этому примеру, для каждого шаблона есть @ViewChild('one') one:TemplateRef<any>;.

Я делаю приложение, которое по сути является электронной книгой. В настоящее время у меня есть <ng-template #pagexx> для каждой страницы. Есть ли способ избежать @ViewChild для каждой страницы? Это будет довольно утомительно для большого набора страниц.

Ищете способ, которым выражение может быть передано из component.ts, и выражение будет оцениваться как page6 или page7...

Спасибо за любую помощь.


angular ng-template
person phil magnuson    schedule 11.03.2018    source источник
comment
Пожалуйста, предоставьте больше кода, чтобы было понятнее, чего вы пытаетесь достичь, что вы пробовали и где потерпели неудачу.   -  person Günter Zöchbauer    schedule 11.03.2018
comment
Спасибо, что посмотрели это. В .html <ng-container [ngTemplateOutlet]="page6"> </ng-container> правильно выбирает шаблон <ng-template #page6>. В связанном .ts есть такое назначение: templatePage="page6";. Однако [ngTemplateOutlet]=templatePage выдает ошибку.   -  person phil magnuson    schedule 11.03.2018
comment
Пожалуйста, отредактируйте вопрос и добавьте туда код. Код в комментариях плохо читается. Пожалуйста, также добавьте больше кода, чем в комментарии. Вы используете абстрактные термины в своем вопросе, такие как страница, которая ничего не говорит о том, как вещи связаны друг с другом. Если есть ошибка, предоставьте полное и точное сообщение об ошибке.   -  person Günter Zöchbauer    schedule 11.03.2018
comment
см. код на странице plnkr.co/edit/aps6z9NJlRAkx6hVMxug?p=preview. в строке 14 я хотел бы использовать что-то похожее на <ng-container [ngTemplateOutlet]=templatePage>, однако это приводит к ошибке. Как я могу использовать переменную templatePage из определения класса?   -  person phil magnuson    schedule 11.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Переменная шаблона — это не строка, это ссылка на элемент или компонент. Вы можете получить его, например, с помощью @ViewChild()

@Component({
  selector: 'my-app',
  template: `
      <h3>templatePage = {{page}}</h3>

      <button (click)="page = page == page1 ? page2 : page1">toggle</button>

       <ng-container [ngTemplateOutlet]="page1"></ng-container>

       <ng-container [ngTemplateOutlet]="page2"></ng-container>

       <ng-container [ngTemplateOutlet]="page"></ng-container>

      <ng-template #tPage1>page 1</ng-template>
      <ng-template #tPage2>page 2</ng-template>

  `,
})
export class App {
  @ViewChild('tPage1') page1:TemplateRef;
  @ViewChild('tPage2') page2:TemplateRef;
  page:TemplateRef;

  name:string;
  templatePage:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

Пример планкера

Пример плункера с ViewChildren

person Günter Zöchbauer    schedule 11.03.2018
comment
Большое спасибо за вашу помощь. У меня более 100 страниц, поэтому я пытаюсь найти способ построить массив TemplateRef или создать TemplateRef динамически. Мои исследования до сих пор показывают, что это невозможно. - person phil magnuson; 11.03.2018
comment
Я очень ценю вашу помощь в этом. Становимся ближе. Однако я не нахожу @QueryChildren нигде в Angular. Мне удалось подобраться очень близко к @ViewChildren(TemplateRef) pageList: QueryList <TemplateRef<any>>;. Это возвращает все элементы <ng-template> и, похоже, также подбирает дочерний элемент <ng-container>. Спасибо еще раз. - person phil magnuson; 13.03.2018
comment
@philmagnuson извините, наверное, я уже созрел для сна, когда писал это. Я имел в виду ViewChildren. Извините за путаницу. - person Günter Zöchbauer; 13.03.2018
comment
Гюнтер достаточно хорошо ответил на вопрос, чтобы помочь мне найти решение. Наконец-то я использую <ng-template #page> и @ViewChildren('page') pageList: QueryList <TemplateRef<any>>;. Спасибо за всю помощь. - person phil magnuson; 15.03.2018