![](/img/trans.png)
[英]AngularJS ng-template inside ng-template for tree structure
[英]not show <ng-template> when using structure directive
我創建這個指令顯示或隱藏標簽。
Directive({
selector: '[appUser]'
})
export class UserDirective {
RoleId:Subscription | null=null;
op:boolean;
_roleId:number;
opo:ValidateUR;
constructor(private optService:OptionsService
,private logserve:LoginService,
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef) {
this.opo=this.optService.initialValidateUR();
this.RoleId=this.logserve._roleId$.subscribe((rId)=>{
this._roleId=rId;
})
}
@Input('appUser') set ngRoleValidate(oId:number)
{
this.opo.optionId=oId;
this.optService.ValidateUser(this.opo).subscribe((rid)=>{
if(rid==true)
{
console.log('in true')
this.viewContainerRef.createEmbeddedView(this.templateRef);
}else{
this.viewContainerRef.clear();
}
})
}
}
這是html代碼:
<li *ngFor="let op of optionList">
<ng-template *appUser="op.id">
<!-- <fa-icon [icon]="op.icon"></fa-icon> -->
<label (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
</ng-template>
</li>
現在我需要rid
為true時顯示標簽,而rid
為true時隱藏標簽,但是rid
為true時不顯示標簽。 有什么問題 ?
模板的一部分:
<ng-template *appUser="op.id">
擴展為:
<ng-template [appUser]="op.id">
<ng-template>
您的指令將呈現<ng-template [appUser]="op.id">
。 我們可以看到它被包裹在另一個ng-template
,除非創建嵌入視圖,否則無法渲染該ng-template
。
為了正確呈現它,我將使用ng-container
而不是ng-template
:
<ng-container *appUser="op.id">
<!-- <fa-icon [icon]="op.icon"></fa-icon> -->
<label (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
</ng-container>
另一種方法是使用擴展版本:
<ng-template [appUser]="op.id">
<!-- <fa-icon [icon]="op.icon"></fa-icon> -->
<label (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>
</ng-template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.