Как использовать метод createEmbeddedView для TemplateRef в angular4?

Я начинаю изучать манипуляции с DOM в Angular и обращаю внимание на templateRef и его метод createEmbeddedView. Мне более интересно узнать об этом методе. Теперь весь мой вопрос в том, как использовать createEmbeddedView этого метода

@Component({
  selector: 'app-root',
  template: `
<ng-template #template>

</ng-template>
  `
})
export class AppComponent implements AfterViewChecked {
        @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;      
  constructor() { }

  ngAfterViewChecked() {
    this._template.createEmbeddedView('this is a embedded view')
  }
}

angular angular-template
person Lijin Durairaj    schedule 22.12.2017    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Вы можете создать встроенное представление, используя метод createEmbeddedView, а затем прикрепить это представление к DOM через ViewContainerRef:

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
        <ng-container #vc></ng-container>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
    constructor() { }

    ngAfterViewChecked() {
        const view = this._template.createEmbeddedView({fromContext: 'John'});
        this.vc.insert(view);
    }
}

Или вы можете создать представление, используя ViewContainerRef напрямую:

ngAfterViewChecked() {
    this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}

Контекст - это объект со свойствами, и вы можете получить доступ к этим свойствам через let- привязки.

Чтобы узнать больше, прочтите Изучение методов манипулирования Angular DOM с помощью ViewContainerRef, а также см. этот ответ.

person Max Koretskyi    schedule 22.12.2017
comment
какой будет тип контекста, будет ли это строка? и что означает vc, это viewContainerRef? - person Lijin Durairaj; 22.12.2017
comment
да, я понял это, но мой вопрос в том, какой тип контекста вы также упомянули в своем коде. это строка, которая принимает значение т.е. ‹div› это динамический элемент ‹/div› - person Lijin Durairaj; 22.12.2017
comment
@LijinJohn, я только что добавил пример использования свойств объекта контекста внутри шаблона - person Max Koretskyi; 22.12.2017
comment
@LijinDurairaj, есть ли еще что-нибудь неясное по поводу моего ответа? - person Max Koretskyi; 26.12.2017
comment
@LijinDurairaj Пожалуйста, отметьте это как ответ, если это ответило на ваш вопрос. - person James Poulose; 14.11.2018
comment
Кто-нибудь еще заметил, что этот ответ создает ошибку ExpressionChangedAfterItHasBeenCheckedError? - person Skyler; 28.01.2019
comment
@Skyler, эта ошибка не является специфической для данного подхода, она может возникать при различных обстоятельствах, вы можете прочитать об этом подробнее здесь и здесь - person Max Koretskyi; 01.02.2019