Прогнозируемая угловая директива инициализируется, когда она должна быть скрыта.

Question

У меня есть расширитель, который использует контентную проекцию. Содержимое расширителя заключено в * ngIf (для оптимизации производительности). К сожалению, я понял, что все мои директивы в расширяемой форме инициализируются при запуске самого приложения, даже несмотря на то, что расширяемый изначально закрыт.

Моя директива не должна инициализироваться до того, как вскрывается фактически открытая. Таким образом, мне нужна какая-то задержка инициализации или крючок, который запускается, когда директива фактически отображается.

Пример кода (Plunker здесь: https://plnkr.co/edit/R84AXZheAtZYLRmeSfkm?p=preview):

@Component({ 
    selector: 'my-app', 
    template: ` 
    <some-component> 
     Projected content <div some-directive></div> 
    </some-component> 
    `, 
}) 
export class App {} 


//************* Component that uses content projection ************* 

@Component({ 
    selector: 'some-component', 
    template: ` 
    <button (click)="showBody=!showBody">Toggle Content</button> 
    <div *ngIf="showBody"> 
     <ng-content></ng-content> 
    </div> 
    `, 
}) 
export class SomeComponent { 
    constructor() {} 
    private showBody = false; 
} 

//************* Directive that is set within an ng-if ************* 
@Directive({ 
    selector: '[some-directive]', 
}) 
export class SomeDirective { 
    constructor() { 
    } 

    ngOnInit() { 
    document.body.append('This should not be executed when the content is not visible'); 
    } 
} 

Plunker можно найти здесь: https://plnkr.co/edit/R84AXZheAtZYLRmeSfkm?p=preview

Answer 1

обновление Угловой 5

ngOutletContext было переименовано в ngTemplateOutletContext

См. Также https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

оригинальный

Это ожидаемое поведение. Вы можете проецировать содержимое без <ng-content> и запросить его с помощью @ContentChildren().

Вам нужна другая стратегия. Например передать содержимое в качестве шаблона и использовать ngTemplateOutlet для вставки Контента

Смотрите также How to repeat a piece of HTML multiple times without ngFor and without another @Component