Angular 视图完全加载后如何从另一个组件调用方法（AppComponent）？

我正在使用来自“内部角度材质”的MatMenu

HeaderComponent

。我只需要在特定条件下打开菜单（方法），在

ProductDetailComponent

上调用此方法。但是，此方法仅在加载视图后在

ngAfterViewInit（）内部工作

我找到了一种从
ProductDetailComponent
到
HeaderComponent
的通信方式，但是有一个连接到组件的子-父关系
HeaderComponent
是从
AppComponent
调用的

下面是AppComponent


您可以通过使用共享服务并在需要时注入服务来实现这一点

设置一个共享服务时，我放置了获取、设置和切换菜单状态的方法

SharedService.ts

import { Injectable } from '@angular/core';

    @Injectable()
    export class SharedService {

    //The current menu state
    private showMenu_ = false;

    //get the current menu state
    get showMenu() {
        return showMenu_;
    }

    //set the menu state
    set showMenu(state: boolean) {
        this.showMenu_ = state;
    }

    //toggle the menu
    public toggleMenu() {
        this.showMenu_ = !this.showMenu;
    }


}

将服务注入appComponent，以便我们可以使用它控制菜单状态

appComponent.ts

import { SharedService } from 'PATH TO SHARED SERVICE';

...

constructor(public sharedService: SharedService){}

import { SharedService } from 'PATH TO SHARED SERVICE';

...

constructor(public sharedService: SharedService){}

import { SharedService } from 'PATH TO SHARED SERVICE';

...

export class appComponent implements OnInit, OnDestroy {

//variable used to show/hide the menu.
public showMenu;

//reference to subscription so we can unsubscribe later.
private this.menuStateSub: Subscription;

constructor(public sharedService: SharedService){}

ngOnInit() {  
    //subscribe to the menuState BehaviorSubject
    this.menuStateSub = this.sharedService.menuState().subscribe((state)=>{
        this.showMenu = state;
    })
}

ngOnDestroy() {
    //unsubscribe before leaving the page
    this.menuStateSub.unsubscribe();
}

import { SharedService } from 'PATH TO SHARED SERVICE';

...

constructor(public sharedService: SharedService){}

根据sharedService中设置的状态将我的标题设置为显示/隐藏

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {

//The current menu state
private showMenu_ = false;
private showMenu$: BehaviorSubject<boolean> = new 
BehaviorSubject(false);

//get a reference to showMenu$ for subscription
public menuState() {
    return showMenu$;
}

//Change menu state to show.
public showMenu(){
    this.showMenu_ = true;
    this.showMenu$.next(this.showMenu_);
}

//Change menu state to hide.
public hideMenu(){
    this.showMenu_ = false;
    this.showMenu$.next(this.showMenu_);
}

//Toggle menu state.
public toggleMenu(){
    this.showMenu_ = !this.showMenu;
    this.ShowMenu$.next(this.showMenu_);
}

//get the current menu state.
public getMenuState() {
    return this.showMenu$.getValue();
}

appComponent.html

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

ProductComponent.html

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

根据sharedService中设置的状态将我的标题设置为显示/隐藏

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {

//The current menu state
private showMenu_ = false;
private showMenu$: BehaviorSubject<boolean> = new 
BehaviorSubject(false);

//get a reference to showMenu$ for subscription
public menuState() {
    return showMenu$;
}

//Change menu state to show.
public showMenu(){
    this.showMenu_ = true;
    this.showMenu$.next(this.showMenu_);
}

//Change menu state to hide.
public hideMenu(){
    this.showMenu_ = false;
    this.showMenu$.next(this.showMenu_);
}

//Toggle menu state.
public toggleMenu(){
    this.showMenu_ = !this.showMenu;
    this.ShowMenu$.next(this.showMenu_);
}

//get the current menu state.
public getMenuState() {
    return this.showMenu$.getValue();
}

appComponent.html

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

现在我们可以使用该服务来切换状态。
ProductComponent.html

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>

<my-header *ngIf="sharedService.showMenu"></my-header>

<div>
  <button (click)="sharedService.toggleMenu()">Click</button>
</div>


点击
你能在stackblitz.com中添加你的代码吗？我想实现这一点，但在AppComponent上使用此结构