完全加载视图(AppComponent)后如何从另一个组件调用方法? [英] How to call a method from another component after view is fully loaded (AppComponent)?
问题描述
我正在使用HeaderComponent
内部Angular Material中的MatMenu.我只需要在某些条件(方法)下打开菜单,然后在ProductDetailComponent
上调用此方法即可.但是,此方法仅在加载视图之后在ngAfterViewInit()
内部起作用.
I'm using MatMenu from Angular Material inside HeaderComponent
. I just need to open the Menu under certain conditions (method), calling this method on ProductDetailComponent
. However this method only works inside ngAfterViewInit()
, after the view is loaded.
我找到了一种从ProductDetailComponent
到HeaderComponent
的通信方式,但是有一个儿童与父母之间的关系才能到达各个组成部分.从AppComponent
调用HeaderComponent
.
I found a way to comunicate from ProductDetailComponent
to HeaderComponent
, however there is a Children-Parent relationship to reach the components. HeaderComponent
is called from AppComponent
.
这是AppComponent
Here is AppComponent
<my-header [openMenu]="clickBehavior"></my-header>
<router-outlet></router-outlet> <!-- ProductComponent -->
ProductComponent
ProductComponent
<router-outlet></router-outlet> <!-- ProductDetailComponent -->
ProductDetail组件
ProductDetail component
export class ProductComponent {
clickBehavior = new BehaviorSubject(null);
click() {
this.clickBehavior.next(1);
}
}
ProductDetail标记
ProductDetail markup
<!-- i need to move it to app component
<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>
推荐答案
您可以通过使用共享服务并在需要的地方注入该服务来实现此目的.
You can achieve this by using a shared service and injecting the service where it is required.
设置共享服务,我放置获取,设置和切换菜单状态的方法.
Setup a shared service, i put methods to get, set and toggle the menu state.
SharedService.ts
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中,以便我们可以使用它控制菜单状态.
Inject the service into appComponent so we can control the menu state with it.
appComponent.ts
appComponent.ts
import { SharedService } from 'PATH TO SHARED SERVICE';
...
constructor(public sharedService: SharedService){}
根据sharedService中设置的状态将my-header设置为显示/隐藏.
Set my-header to show/hide based on the state set in the sharedService.
appComponent.html
appComponent.html
<my-header *ngIf="sharedService.showMenu"></my-header>
将服务注入到其他任何组件/页面中,以更改菜单的状态. 在这种情况下为ProductComponent.ts.
Inject the service into any other component/page to change the state of the menu. In this case ProductComponent.ts.
ProductComponent.ts
ProductComponent.ts
import { SharedService } from 'PATH TO SHARED SERVICE';
...
constructor(public sharedService: SharedService){}
ProductComponent.html
ProductComponent.html
<div>
<button (click)="sharedService.toggleMenu()">Click</button>
</div>
或与BehavourSubject一起使用.
在SharedService中创建BehaviorSubject.
Create the BehaviorSubject in 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中,以便我们可以订阅菜单状态.
Inject the service into appComponent so we can subscribe to the menu state.
appComponent.ts
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设置为显示/隐藏.
Set my-header to show/hide based on the state set in the sharedService.
appComponent.html
appComponent.html
<my-header *ngIf="sharedService.showMenu"></my-header>
最后将服务注入到我们需要控制菜单状态的位置.
Finally inject the service where we need to control the menu state.
ProductComponent.ts
ProductComponent.ts
import { SharedService } from 'PATH TO SHARED SERVICE';
...
constructor(public sharedService: SharedService){}
,现在我们可以使用该服务来切换状态. ProductComponent.html
and now we can use the service to toggle the state. ProductComponent.html
<div>
<button (click)="sharedService.toggleMenu()">Click</button>
</div>
这篇关于完全加载视图(AppComponent)后如何从另一个组件调用方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!