使用指令有条件地渲染 Angular 组件

使用指令有条件地渲染 Angular 组件

Image by 彼得·达加兹 from 关注

设想

如果 *准备好了 指令设置为 错误的 ，那么我们要渲染一个 微调器组件 , 否则我们想要显示包含在声明该指令的元素中的内容。

 <h1><code>isReady</code>设置为<code>true</code></h1>  
 <div *isReady="true">内容</div>  
 <h1><code>isReady</code>设置为<code>false</code></h1>  
 <div *isReady="false">  
 <span>显示微调器组件而不是此跨度</span>  
 </div>

方法

如果指令 准备好了 财产是 真实的 我们渲染内容（内容被捕获在 模板参考 我们打电话给 this.vcr.createEmbeddedView(this.templateRef) 渲染它）。

如果 准备好了 值为假，我们渲染 微调器组件 像这样。

 如果（！this.isReady）{  
 this.vcr.createComponent(SpinnerComponent);  
 }

演示

[

Angular 指令组件渲染 - StackBlitz

一个基于 @angular/animations、@angular/compiler、@angular/core、@angular/common 的 angular-cli 项目……

stackblitz.com

](https://stackblitz.com/edit/angular-ivy-bnpcu1?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11536/43090311