如果模板包含 *ngIf,Angular 自定义结构指令无法重建 ViewContainer
Posted
技术标签:
【中文标题】如果模板包含 *ngIf,Angular 自定义结构指令无法重建 ViewContainer【英文标题】:Angular custom structural directive fails to rebuild ViewContainer if template contains *ngIf 【发布时间】:2021-04-24 21:15:12 【问题描述】:我对 ViewContainers 和结构指令有疑问。
我有一个自定义结构指令 = 例如“permissionAccess”。
它从我的 NGRX 存储 中选择数据并寻找匹配的权限。 如果没有权限,它会清除 ViewContainer。如果它有权限,它会使用注入的 TemplateRef 重建 ViewContainer。 (这一切都很好——我已经用 Dom 元素、组件、视图进行了测试)
但是……如果任何 Dom 包含 "ngIf" 指令,它就无法重建 ViewContainer。
有人知道为什么会这样吗?我不知道!
它甚至因*ngIf=“true”
而失败
模板示例作品:
<div *cwbPermission=“'ADMIN'">
<p>test container</p>
<div>
<p>Nested container1</p>
<div>
<p>Nested container2</p>
</div>
</div>
</div>
模板示例失败:
<div *cwbPermission=“'ADMIN'">
<p>test container</p>
<div *ngIf=“true">
<p>Nested container1</p>
<div>
<p>Nested container2</p>
</div>
</div>
</div>
谁能给我解释一下?我不知道!
【问题讨论】:
我试过stackblitz.com/edit/…它工作正常。 好的,谢谢@chellappan。猜猜我需要创建一个 stackblitz 来正确显示问题。我正在使用对 NGRX 商店的订阅、硬编码列表和一些可能以某种方式影响重建的条件逻辑。 【参考方案1】:所以,我不确定这是否是解决此问题的最佳方法,但看起来它对我有用。 在视图容器中创建模板后,我添加了一个 changeDetectorRef.detectChanges(),UI 现在按预期更新。 到目前为止没有发现任何问题。
/**
* Creates the template content
*/
showContent(): void
this.viewContainer.remove();
this.viewContainer.createEmbeddedView(this.templateRef, this.context, 0);
this.cdref.detectChanges();
【讨论】:
以上是关于如果模板包含 *ngIf,Angular 自定义结构指令无法重建 ViewContainer的主要内容,如果未能解决你的问题,请参考以下文章
Angular 5 自定义指令触发包装到 *ngIf=false 中的元素