angular - 实现你自己的 *ngIf

Question

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

如何实现我自己的 *ngIf？

Answer 1

它被称为结构指令。

你可以查看源*ngIf

Angular 文档中还有一个关于该https://angular.io/guide/structural-directives的部分

主要部分是

 this.viewContainer.createEmbeddedView(this.templateRef);

这允许盖章模板。

如果你有

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

将*导致

<my-component></my-component>

作为模板传递给指令，然后可以标记/删除。

Answer 2

这很简单。

ngIf像这样使用好旧的，*ngIf='someVariable'然后只需将其切换到someVariable您想要渲染或不渲染的时间。truefalse

我要做的是在组件中创建一个事件侦听器来侦听窗口宽度事件并查看宽度将决定是否通过设置隐藏某些元素someVariable