Angular2路由器 - 有條件地隱藏鏈接

Question

有沒有辦法在Angular2中有條件地隱藏路由器鏈接？

例如，我有以下代碼;

<li><a [routerLink]="['RegisterUser']">Register User</a></li> 

我想隱藏的鏈接，當用戶登錄。

在我的部分，我用的是@CanActivate裝飾，以確定是否該路線可以被激活，但是這不能掩蓋鏈接本身。

@CanActivate(() => hasValidToken()) 

我可以使用與hasValidToken()方法*ngIf結構指令（返回boolean）但這似乎重手，有點髒。

<li><a [routerLink]="['RegisterUser']" *ngIf="!hasValidToken()">Register User</a></li> 

有沒有更簡單的方法來解決這個問題？

感謝

Answer 1

我怎麼做的，這使得它更容易，如果你想在未來增加更多的航線與可觀察到的是手錶一的loggedIn事件創建服務。

然後我用ngOnChanges，當有人登錄，我的其他菜單項追加到我的菜單，做一個* ngFor環比我的[routerLink]的。

@Component({ 
    selector: 'my-cmp', 
    template: `<li *ngFor="#prop in myProps><a [routerLink]="[prop]">Register User</a></li>` 
}) 
class MyComponent implements OnChanges { 
    @Input() LoggedIn: any; 
    constructor(){ 
    myProps = ['About_Me', 'Not_Logged_In_Menu_Item']; 
    } 
    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
    myProps.push(changes['LoggedIn'].currentValue); 
    console.log('ngOnChanges - myProps = ' + changes['myProps'].currentValue); 
    } 
} 

我會做，雖然這種方式的唯一原因是，如果你感到沮喪的線，你將不得不更改其他菜單項登錄的用戶。這是用於Auth和Auth應用程序，其中一些用戶比其他用戶擁有更多訪問權限。