使用angular 4根据查询参数显示菜单项
我正在使用基于角色的菜单,以根据查询字符串显示菜单项。比如,当url是这种形式时,我必须只显示管理员的菜单项。但我的逻辑是隐藏所有菜单项。为此,我实现了header.component.ts中的逻辑使用angular 4根据查询参数显示菜单项,angular,angular-ng-if,Angular,Angular Ng If,我正在使用基于角色的菜单,以根据查询字符串显示菜单项。比如,当url是这种形式时,我必须只显示管理员的菜单项。但我的逻辑是隐藏所有菜单项。为此,我实现了header.component.ts中的逻辑 ngOnInit() { this.route.queryParams .filter(params => params.type) .subscribe(params => { console.log(params); //{type: "adm
ngOnInit() {
this.route.queryParams
.filter(params => params.type)
.subscribe(params => {
console.log(params); //{type: "admin"}
this.type = params.type;
console.log(this.type);
if(this.type == "admin"){
console.log("ADMIN PAGE");
//this.router.navigate(['dashboard'], { queryParams: { type: this.type } });
//this.router.navigate(['dashboard']);
}else if(this.type == "national"){
console.log("NATIONAL PAGE");
}else if(this.type == "warrington"){
console.log("WARRINGTON PAGE");
}else if(this.type == "subcontractorAdmin"){
console.log("SUB CONTRACOTR ADMIN PAGE");
}else if(this.type == "subcontractorManager"){
console.log("SUB CONTRACTOR MANAGER PAGE");
}else{
console.log("OTHERS PAGE");
}
});
}
当我使用逻辑,然后它的工作良好,如预期的。但是,当我尝试根据*ngIf=“type=admin”显示和隐藏菜单项时,所有菜单项都被隐藏。请参阅下面我的模板代码
header.component.html
<ul class="nav navbar-nav">
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/dashboard','_self')">Dashboard</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/supplier-list','_self')">Suppliers</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/compliance-supplier-list','_self')">Compliance</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/admin-invoice-list','_self')">Invoicing</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/internal-user-list','_self')">User Management</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/node/add/upload_weight_csv','_self')">Weight Ticket</a>
</li>
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
<a routerLink="/searchsupplier">Search</a>
</li>
</ul>
-
-
-
-
-
-
-
搜寻
有谁能帮我解释一下为什么所有的菜单项都隐藏了。我想你应该换一行
<li routerLinkActive="active" *ngIf="'type' == 'admin';">
到
这与名为“type”的变量相比,而不是硬编码字符串
'type'
,并且还删除了*ngIf
末尾不必要的分号,因为它在那里不是必需的。'type'=='admin'从来都不是真的。您正在比较两个硬编码的字符串,但当我导航到主页()时,所有菜单项都隐藏了。请参阅下面我的修改。
<li routerLinkActive="active" *ngIf="type == 'admin'">