离子侧菜单 - view.ts 中的触发功能

Question

我在主app.component.html中有一个菜单

<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list no-lines width="10">
<ion-list-header>
<h2>MyApp</h2>
</ion-list-header>  
<ion-menu-toggle auto-hide="true">
<ion-item click='MainView.fooBar()'>
Foo Bar
</ion-item>
</ion-menu-toggle>
....
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>

我允许它在我的主视图中打开。菜单在其他视图中处于禁用状态。 现在，如何在菜单中触发一个单击事件，该事件将调用上述特定方法

class MainView implements OnInit {
fooBar(){}
}

以某种方式通过路由器对象？我不明白，因为MainView显示在<ion-router-outlet id="main-content">和整体在app.components中定义。

Answer 1

您可以使用离子菜单事件来实现您的目的。

Name              Description
ionDidClose       Emitted when the menu is closed.
ionDidOpen        Emitted when the menu is open.
ionWillClose      Emitted when the menu is about to be closed.
ionWillOpen       Emitted when the menu is about to be opened.

喜欢这个。

<ion-menu (ionDidOpen)="foBar()" contentId="main-content" type="overlay">

它将在打开侧边菜单时触发。

Answer 2

我通过编写自己的事件服务解决了它

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class EventsService {
static subject = new Subject<any>();
static sendMessage(text){
EventsService.subject.next(text);
}
static getMessage(): Observable<any>{
return EventsService.subject.asObservable();
}
}

其中一个视图sendMessage，另一个视图等待特定类型的getMessage。