Question

我在标题中添加了一个按钮来显示/隐藏导航抽屉。由于按钮和导航抽屉在不同的组件中，哪个选项更适合沟通？

Answer 1

您可以使用服务来预先确定导航栏的状态。您可以在服务中使用 Observable boolean 。单击该按钮时，将其设置为true或false。然后从该服务属性的导航栏组件订阅中隐藏导航栏中的内容。

在您的服务中

@Injectable()
export class GlobalDataService {
  private showNavigationBar = new Subject<boolean>();

  constructor() {

  }

  public getNavigationbarState(): Observable<boolean> {
    return this.showNavigationBar.asObservable();
  }

  public setNavigationbarState(value: boolean) {
    return this.showNavigationBar.next(notification);
  }
}

在标题组件按钮中单击事件。

constructor(private globalDatServce:GlobalDataService) {

}

public onButtonClick(): void {
  this.globalDataService.setNavigationbarState(true); // pass true or false as needed
}

在naviagtion栏组件构造函数中。

constructor(private globalDatServce:GlobalDataService) {
   this.globalDatServce.getNavigationbarState().subscribe((res) => {
     this.shownavigation = res;
   });
}

在模板中

<div *ngIf="shownavigation">
  // navigation content goes here
</div>

Answer 2

a＆＃34;简化＆＃34;服务版本是

//in header
<div *ngIf="shownavigation">....</div>

constructor(private globalDataService:GlobalDataService){}
get shownavigationn()
{
   return this.globalDataService.shownavigation
}

和

//In component
<button (click)="click()">Click me!</button>

constructor(private globalDataService:GlobalDataService){}
set shownavigationn(value)
{
   this.globalDataService.shownavigation=value
}
click()
{
    this.showNavigation=!this.showNavigation
}

如何通过角度

2 个答案: