Angular4：如何通知MenuComponent中，一個用戶登錄

我的菜單是由MenuComponent中和登錄驅動由LoginComponent 驅動在我的導航欄我有這樣的：Angular4：如何通知MenuComponent中，一個用戶登錄

<li *ngIf="!isConnected"><a [routerLink]="['/login']" class="btn btn-link">Login</a></li> 
<li *ngIf="isConnected"><a href="" (click)="logout()">Logout</a></li>

如何傳遞isConnected至極是一個變量的MenuComponent，當我在méthode登錄（），這是在LoginComponent.ts？感謝您的幫助

來源

2017-08-05 Nicolas Alain

使用共享服務將布爾值從一個組件傳遞到另一個組件。 – Ploppy

爲什麼不，但似乎很複雜，你有一個簡單的共享服務的例子嗎？ –

官方文檔中有一個很好的例子，使用'Subject'：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service這完全適用於任何類型的組件交互，如果訂閱的組件不在同一時間查看，你只需要使用例如'BehaviorSubject' – Alex

嘗試在角度文檔中使用@Input和EventEmitters與@Output。 component interaction angular.io

來源

2017-08-05 11:23:13 saunet

你好，是否有可能當MenuComponent被路由調用，然後插入一個<路由器-outlet>？ –

檢查此[鏈接（https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication）] – saunet

我想我有一個解決方案（感謝Ploppy），這大概不是解決方案，但它是簡單而有效的，這裏是我的代碼：

服務：

import { Injectable } from '@angular/core'; 
@Injectable() 
export class SharedService { 
    public isConnected: boolean; 
    constructor() { } 
}

MenuComponent的

@Component({ 
    selector: 'app-menu', 
    templateUrl: './menu.component.html', 
    styleUrls: ['./menu.component.css'] 
}) 
export class MenuComponent implements OnInit { 

    @Input() isConnected: boolean; 
    constructor(private router: Router, private sharedService: SharedService){ 
    this.sharedService.isConnected = false; 
} 

    ngOnInit() { 
    } 
    logout() { 
    this.sharedService.isConnected = false; 
    this.router.navigate(['/home']); 
    } 
}

LoginComponent

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
    user: User; 
    isConnected: boolean = false; 
    constructor(private router: Router, private sharedService: SharedService) { } 
    ngOnInit() { 
    this.user = new User(); 
    } 
    public login(){ 
    if (...) { 
    this.partageService.isConnected=true; 
    this.router.navigate(['/home']); 
    } 
    } 
}

個

AppComponent.ts

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor(private router: Router, public sharedService: SharedService){} 
}

AppComponent.HTML

<app-menu [isConnected]="sharedService.isConnected"></app-menu>

稍有不便：它是MenuComponent中至極已註銷（），而不是LoginComponent，它不是非常正確的，註銷（）不MenuComponent但LoginComponent的響應性！解決此問題的想法？

來源

2017-08-05 13:06:36

Angular4：如何通知MenuComponent中，一個用戶登錄

回答

相關問題