Javascript 角度-如何在父组件菜单上的菜单项中传递回调

我想在我的应用程序栏中有一个菜单，可以从子组件获取其菜单项。我正在使用角材质“mat menu”，我能够显示菜单项，但我似乎无法启动子组件上的相关功能

app.component.html（父项）：

下面是子组件“company.component.ts”，它将其菜单项传递给app.service，以便app.component可以检索它们。请注意，menuData是一个对象，它包含类型为string和callback函数的对象数组

  ngOnInit(): void {

    this._appService.setMenuData({
      menuItems: [
        {text: "Add Company", action: this.addCompany}
    ]});
  }

  addCompany(): void {
    this._router.navigate(['/company', 0])
  }

由于某些原因，我的Chrome开发工具中没有显示click事件处理程序。我希望菜单点击调用功能，而不仅仅是执行导航

也许有更好的办法来解决这个问题。如果是，请提供一个示例链接。蒂亚

---

编辑：Stackblitz位于更新答案处 根据您的

stackblitz

：

当您决定调用菜单操作时，只需将子组件的

this

绑定到要在子范围中运行的新菜单操作

大概是这样的：

公司列表.component.ts

  ngOnInit(): void {
    this._appService.setMenuData({
      menuItems: [
        {text: "Add Company", action: this.addCompany.bind(this)}
    ]});
  }

class AppService {
  // ...
  menuItems$: BehaviourSubject<any[]> = new BehaviourSubject([]);
  constrcutor() {}

  // ...
}

class AppComponenet {
  // ...
  menuItems: any[] = [];
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.subscribe(newMenu => {
      this.menuItems = newMenu;
    });
  }
}

class ChildComponenet {
  // ...
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.new(['home', 'about']);
  }
}

旧答案 您可以在

appService

中创建

menuItems$

可观察对象，并在

app.component.ts

中订阅它，然后从子组件向该可观察对象添加新的menuItems，则

app.component

中的menuItems将具有新的值

像这样的

appService.ts

  ngOnInit(): void {
    this._appService.setMenuData({
      menuItems: [
        {text: "Add Company", action: this.addCompany.bind(this)}
    ]});
  }

class AppService {
  // ...
  menuItems$: BehaviourSubject<any[]> = new BehaviourSubject([]);
  constrcutor() {}

  // ...
}

class AppComponenet {
  // ...
  menuItems: any[] = [];
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.subscribe(newMenu => {
      this.menuItems = newMenu;
    });
  }
}

class ChildComponenet {
  // ...
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.new(['home', 'about']);
  }
}

child.compnenet.ts

  ngOnInit(): void {
    this._appService.setMenuData({
      menuItems: [
        {text: "Add Company", action: this.addCompany.bind(this)}
    ]});
  }

class AppService {
  // ...
  menuItems$: BehaviourSubject<any[]> = new BehaviourSubject([]);
  constrcutor() {}

  // ...
}

class AppComponenet {
  // ...
  menuItems: any[] = [];
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.subscribe(newMenu => {
      this.menuItems = newMenu;
    });
  }
}

class ChildComponenet {
  // ...
  constrcutor(private appService: AppService) {}

  ngOnInit() {
    // ...
    this.appService.menuItems$.new(['home', 'about']);
  }
}

---

谢谢你的回复。然而，我相信点击事件不触发的问题仍然存在。您的解决方案只是传递数组，而不是包含数组的对象。为相同的问题提供stackblitz，忽略“未找到文件”错误…它们是错误的。