2016-01-25 58 views
0

由於缺乏角2文件(因此它仍處於測試階段),我在這裏張貼了這個問題。我想弄清楚如何實現一個簡單的標誌,可以在任何視圖上設置或取消設置。實施定期視圖屬性

爲了說明我的問題看下面的代碼片段。 「showNav」標誌確保人們在註銷時不會看到導航。

一個幾句話:

  • 下面的代碼片段只會工作以來的第一次「ngOnInit」將永遠不會再次進入。添加註銷功能會產生漏洞。
  • 在構造函數中實現邏輯不會做我們多好或者作爲該代碼將不得不被複制每個子組件上粘貼的,除非有一些方便的調用「超級」的父類的構造?
  • ,因爲它似乎可能是組件之間的通信的「angular2」的方式,但是這似乎非常詳細,我可以實現服務。

任何意見,歡迎!

@Component({ 
    selector: 'app', 
    template: ` 
    <nav [ngClass]="{active: showNav}"></nav> 
    <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    {path:'/login', name: 'Login', component: LoginComponent}, 
    {path:'/dashboard', name: 'Dashboard', component: DashboardComponent} 
]) 
export class AppComponent implements OnInit { 
    public showNav:boolean = false; 

    constructor(
    private router:Router, 
    private dataService:DataService 
){} 

    ngOnInit() { 
    if (!this.dataService.getStore().token) { 
     this.router.navigate(['Login']); 
     this.showNav = false; 
    } else { 
     this.router.navigate(['Dashboard']); 
     this.showNav = true; 
    } 
    } 
+1

您是否在尋找路由器生命週期回調https://angular.io/docs/js/latest/api/router/CanActivate-var.html? –

+1

爲什麼不訂閱路由器並檢查'token'是否存活? –

+0

@EricMartinez偉大的想法,感謝 –

回答

1

我想你可能是什麼是什麼曾經是angular.value()在角1

export var ShowNav: boolean = false; 

bootstrap(MyApp, [provide(ShowNav, {useValue: ShowNav})]); 

然後在任意視圖這可以在注射和使用,就像任何服務或主意其他類型的提供者。消耗它的所有組件將共享相同的值。

export class MyComponent{ 
    constructor(showNav: ShowNav){} 

    ... 
} 
+0

這是否意味着我將不得不設置showNav的價值那樣會暴露導航(或反之亦然,隱藏)的每個組件的每一個構造函數。當然可以將默認設置爲最常用的選項。這對布爾值來說很好,但是如果showNav可以是短陣列['apple','bike','yard','ship']中的任何值,那麼該怎麼看似相當混亂。 –

+0

不,將保存ShowNav的值。因此,如果在一個組件中將其設置爲true,那麼導航到另一個組件,它仍然是true,直到代碼中的某處將其設置爲false。 – SnareChops