從另一個組件登錄後顯示註銷菜單？

Question

我想從detailed-page.component.ts登錄後啓用顯示註銷按鈕。加入我們/註銷菜單位於標題組件中。

這是我試過。但登錄後不啓用註銷菜單。如何解決這個問題？

header.component.html

<ul class="nav navbar-nav navbar-right">          
    <li class="loginmenu joinusmenu" (click)="showmodel('register');" *ngIf="loginStatus==0" ><span>Join Us</span></li> 
    <li class="loginmenu joinusmenu" (click)="logout();" *ngIf="loginStatus==1"><span>Logout</span></li> 
</ul> 

詳細-page.component.ts

​​3210

app.component.ts

@Component({ 
     selector: 'my-app', 
     template: ` 
     <app-header></app-header> 
     <router-outlet></router-outlet>  
     <app-footer></app-footer>`, 
     styleUrls: ['../app/app.component.css'], 
    }) 

    export class AppComponent { 

    } 

Answer 1

假設你不需要做很多的狀態管理，你可以使用這樣一個非常簡單的服務。基本上，這StoreService將包含一個需要跨越所有組件共享所有數據：

export class StoreService { 
    public loginStatus = 0; // 0 = not logged in, 1 = logged in 

    setLoginStatus(status: number) { 
    this.loginStatus = status; 
    } 
} 

這則獲得注入到你的頭部和詳細的組件，像這樣：

@Component({ 
    selector: 'app-detailed', 
    template: ` 
<button *ngIf="store.loginStatus === 0" (click)="login()">Login</button> 
`, 
}) 
export class DetailedComponent { 
    constructor(public store: StoreService) { 
    } 

    login() { 
    this.store.setLoginStatus(1); 
    } 
} 

@Component({ 
    selector: 'app-header', 
    template: ` 
    <ul class="nav navbar-nav navbar-right">          
     <li class="loginmenu joinusmenu" (click)="showmodel('register')" *ngIf="store.loginStatus==0" ><span>Join Us</span></li> 
     <li class="loginmenu joinusmenu" (click)="logout()" *ngIf="store.loginStatus==1"><span>Logout</span></li> 
    </ul> 
`, 
}) 
export class HeaderComponent { 
    constructor(public store: StoreService) { 
    } 

    showmodel() { 
    } 

    logout() { 
    this.store.setLoginStatus(0); 
    } 
} 

這裏有一個工作plunker：

https://plnkr.co/edit/xBnWAP7EacoIc5j3USQv?p=preview

請注意，StoreService不會針對需要進行大量修改的應用程序共享狀態。對於更具擴展性的解決方案，請查看使用ngrx。