实现你自己的 *ngIf

Question

我想创建自己的 *ngIf 指令。该指令将获得一个数字，如果屏幕内部宽度像素小于它获得的数字，它将不会呈现模板。

如何实现我自己的 *ngIf？

Answer 1

非常简单。

使用旧的 ngIf，像这样 *ngIf='someVariable'，然后在需要时将 someVariable 从 true 切换到 false渲染与否。

我会做的是在监听 window 宽度事件的组件中创建一个事件监听器，查看宽度将决定是否通过设置 someVariable 来隐藏某些元素

Answer 2

这叫做结构指令。

您可以检查source of *ngIf

Angular 文档中也有一节是关于 https://angular.io/guide/structural-directives

主要部分是

 this.viewContainer.createEmbeddedView(this.templateRef);

允许在模板上盖章。

如果你有

<my-component *myIf="isTrueOrFalse"></my-component>

* 将导致

<my-component></my-component>

作为模板传递给指令，然后可以是 stamped/removed。