Question

我有一个使用内容投影的扩展器。扩展器内容包含在* ngIf中（用于性能优化）。不幸的是，我意识到可扩展的所有指令都在应用程序启动时初始化，即使可扩展最初是关闭的。

在实际打开expandable之前，我的指令不能初始化。所以要么我需要某种初始化延迟，要么是在实际呈现指令时触发的钩子。

示例代码（此处为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

更新Angular 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

当隐藏角度指令被隐藏时，它会被初始化

1 个答案: