角2 - 如何讓

Question

給出了這樣一個模板

<a *ngIf="canAccess()" routerLink="/adminUsers">...</a> 
<a *ngIf="canAccess()" routerLink="/link2">...</a> 
<a *ngIf="canAccess()" routerLink="/otherlink">...</a> 
<a *ngIf="canAccess()" routerLink="/somthingelse">...</a> 

和功能ngIf功能標籤屬性：

canAccess() 
{ 
    ... 

我如何才能

• 路由器鏈路
• 該功能內的任何其他標籤屬性

感謝

Answer 1

我的解決方案是創建一個指令和它相關的組件，所以我只給它的用戶想要訪問

模塊

如果用戶登錄並且可以訪問該鏈接，該指令詢問服務

如果是，該鏈接remplaced與組件

這裏是如何插入組件dynamicaly（不包含授權部分）

import { Directive, Input, ComponentFactoryResolver,ViewContainerRef } from '@angular/core'; 
import { MenuItemComponent } from './menuItem.component'; 

@Directive({ selector: '[menuItem]' }) 
export class MenuItemDirective { 

    constructor(
     private componentFactoryResolver: ComponentFactoryResolver, 
     private viewContainer: ViewContainerRef) {} 

    @Input() set menuItem(_link: string) { 
     if(some sort of condition depending on a auth service) 
     { 
      const factory = this.componentFactoryResolver.resolveComponentFactory(MenuItemComponent); 
      const menuItemComponentRef = this.viewContainer.createComponent(factory); 
      menuItemComponentRef.changeDetectorRef.detectChanges(); 
     } 
     else 
      this.viewContainer.clear(); 
    } 
} 

可能是矯枉過正個例，但最終我用

<a *menuItem="dashBoard"></a> 

代替

<a class="menuItemA menuRouterLinkA" routerLink="/dashBoard" routerLinkActive="menuCurrentLinkA" >{{ "DashBoard" }}</a> 

，它涉及無線th功能/頁面/模塊..訪問授權:-)

yay

Answer 2

您可能需要：

• Location來獲得當前的URL。
• UrlSegment如果你想檢查URL參數。

把你需要的那些放到構造函數中，並在你的canAccess()中調用它們的方法。

此外，您可以使用Guard保護您的路線（從routerLink）本身。

Answer 3

更新您的模板

<a *ngIf="canAccess($event)" routerLink="/adminUsers">...</a> 

和你的組件

canAccess(event){ 

    console.log(event.currentTarget); 
    console.log(event.currentTarget.getAttribute("routerlink")); 
    .. 
    }