如何使父组件在Angular 2中有效地侦听子组件所做的更改？

这主要是一个设计/方法问题

我想要实现的目标：

=>用户注销时隐藏注销链接。使注销链接仅在用户登录时可见。

问题：

菜单和注销是两个不同的组件。所以，当用户单击注销时，将此信息传递给菜单组件是非常困难的。我正在寻找一种更合适/更直接的方法。请给我一些建议。
下面给出了我的代码片段-

menu.component.html

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li routerLinkActive="active"> <a [routerLink]="[ '/home' ]" routerLinkActive="active">Home</a></li>
    <li routerLinkActive="active" *ngIf="loggedIn">
      <app-logout (onLogOutClick)="onLogOutClick($event)"></app-logout>
    </li>
  </ul>
</div>

<a [routerLink]="[ '/logout' ]" routerLinkActive="active" (click)="onClick()">Logout</a>

logout.component.html

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li routerLinkActive="active"> <a [routerLink]="[ '/home' ]" routerLinkActive="active">Home</a></li>
    <li routerLinkActive="active" *ngIf="loggedIn">
      <app-logout (onLogOutClick)="onLogOutClick($event)"></app-logout>
    </li>
  </ul>
</div>

<a [routerLink]="[ '/logout' ]" routerLinkActive="active" (click)="onClick()">Logout</a>

注销

logout.component.ts

import { SharedService } from '../shared.service';
import { Component, OnInit } from '@angular/core';

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

  loggedIn: boolean = false;
  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.loggedIn = this.sharedService.isLoggedIn();
  }

  onLogOutClick($event) {
    this.loggedIn = false;
  }
}

   import { Router } from '@angular/router';
import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { SharedService } from '../shared.service';
import { ModalComponent } from '../modal.component';

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

  @Output() onLogOutClick = new EventEmitter<boolean>();

  constructor(private sharedService: SharedService, private router: Router) { }

  ngOnInit() {

  }

  onClick() {
    console.log('logout component : onclick clicked..');

    if (this.sharedService.isLoggedIn) {
      this.sharedService.logout();
      this.onLogOutClick.emit(true);

    } else {
      // shouldn't reach
      console.log('User not logged in. Discarding logout attempt');
    }
    this.routeToLoginPage();

  }

  routeToLoginPage() {
    this.router.navigate(['/login']);
  }

}

从'@angular/Router'导入{Router}；
从“@angular/core”导入{Component，EventEmitter，OnInit，Output，ViewChild}；
从“../shared.service”导入{SharedService}；
从“../modal.component”导入{ModalComponent}；
@组成部分({
选择器：“应用程序注销”，
templateUrl:'./logout.component.html'，
样式URL:['./logout.component.css']，
提供者：[共享服务]
})
导出类LogoutComponent实现OnInit{
@Output（）onLogOutClick=neweventemitter（）；
构造函数（私有共享服务：共享服务，私有路由器：路由器）{}
恩戈尼尼特（）{
}
onClick（）{
log（'logout组件：onclick clicked..）；
if（this.sharedService.isLoggedIn）{
this.sharedService.logout（）；
this.onLogOutClick.emit（true）；
}否则{
//应该够不着
log（'用户未登录。放弃注销尝试'）；
}
此.routeToLoginPage（）；
}
routeToLoginPage（）{
this.router.navigate（['/login']）；
}
}

在您的

共享服务中

定义一个可观察的

，您可以访问它来确定用户是否登录

@Injectable()
export class SharedService {

    isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject(false)

    login(): void {
        // login business logic
        this.isLoggedIn$.next(true)
    }

    logout(): void {
        // logout business logic
        this.isLoggedIn$.next(false)
    }
}

---

在您的

SharedService

中定义一个

可观察的

，您可以访问它来确定用户是否登录

@Injectable()
export class SharedService {

    isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject(false)

    login(): void {
        // login business logic
        this.isLoggedIn$.next(true)
    }

    logout(): void {
        // logout business logic
        this.isLoggedIn$.next(false)
    }
}

---

状态管理技术。状态管理技术。