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

Question

我在“标题组件”中使用来自 Angular Material 的 MatMenu。我只需要在某些条件下打开菜单。但是这个方法只在 ngAfterViewInit() 中起作用，在视图被加载之后。

export class HeaderComponent implements AfterViewInit {
  @ViewChild('triggerCart') trigger: MatMenuTrigger;

  ngAfterViewInit() {
    this.openMenu();
  }

  openMenu() {
    this.trigger.openMenu();
  }
}

<button mat-button 
        [matMenuTriggerFor]="shoppingCartMenu" 
        #triggerCart="matMenuTrigger" 
        (menuOpened)="isOpened($event)" 
        (mouseenter)="largeScreen ? triggerCart.openMenu() : ''">
</button>

我需要从另一个组件调用此方法，但菜单触发器在 ngAfterViewInit 之外未定义。

<button mat-stroked-button
        (click)="someMethod()">
</button>

export class ProductDetailComponent {
  @ViewChild(HeaderComponent) header: HeaderComponent;
  
  someMethod() {
    this.header.openMenu();
  }
}

我的 Header 组件加载后如何实现组件之间的通信？

Answer 1

这里有一个方法示例（但不一定是最好的方法）。这是为了让人们了解组件之间的交互。

StackBlitz

产品组件

export class ProductComponent {
  clickBehavior = new BehaviorSubject(null);

  click() {
    this.clickBehavior.next(1);
  }
}

产品标记

<my-header [openMenu]="clickBehavior"></my-header>
<div>
  <button (click)="click()">Click</button>
</div>

标题组件

export class HeaderComponent implements AfterViewInit {
  @ViewChild('trigger') trigger: MatMenuTrigger;
  @Input() openMenu: Observable<any>;

  ngAfterViewInit() {
    this.openMenu.subscribe(value => {
      if (value) {
        this.trigger.openMenu();
      }
    });
  }
}

标题标记

<button mat-button
        [matMenuTriggerFor]="menu"
        #trigger="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

这个想法是触发 Header 组件的 Input，这是使用 Product 组件中的 BehaviorSubject 完成的。

参考：

• https://angular.io/guide/observables-in-angular
• https://thinkster.io/tutorials/learn-rxjs-observables/using-behaviorsubject-for-values-that-change-over-time

Answer 2

您可以通过使用共享服务并在需要的地方注入服务来实现此目的。

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

注意：为了对此进行动画处理，因为它使用 ngIf，您将需要使用角度动画。

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){}

根据 sharedService 中设置的状态设置 my-header 以显示/隐藏。

appComponent.html

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

将服务注入任何其他组件/页面以更改菜单的状态。 在本例中为 ProductComponent.ts。

ProductComponent.ts

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

...

constructor(public sharedService: SharedService){}

ProductComponent.html

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

或使用服务中的 BehavourSubject。

在 SharedService 中创建 BehaviorSubject。

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 中，以便我们可以订阅菜单状态。

appComponent.ts

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();
}

根据 sharedService 中设置的状态设置 my-header 以显示/隐藏。

appComponent.html

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

最后在我们需要控制菜单状态的地方注入服务。

ProductComponent.ts

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

...

constructor(public sharedService: SharedService){}

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

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