将路由器出口变量传递给父组件答案

【问题标题】：Passing router outlet variable to parent component将路由器出口变量传递给父组件
【发布时间】：2020-03-01 14:34:30
【问题描述】：

主要组件：

<main-component>
  <sub-menu [menuItems]="routerlist"></submenu>
  <router-outlet></router-outlet>
</main-component>

路由器插座模板（打字稿）：

我已经声明了一个变量来将项目推送到菜单中在我的构造函数或 nginit 中，我有这段代码（routerlist 在构造函数上方声明）

const _routerlist: any[] = [];
_routerlist.push({ route: '#', title: 'menu-item-001'});
this.routerlist = _routerlist

我的问题是如何将 routerlist 传递给主组件，以便子菜单可以使用它？

【问题讨论】：

就像您对子菜单所做的那样：<main [menuItems]="routerlist"></main>
你为什么不在<sub-menu/>订阅路由器？这样做更容易，组件没有依赖关系。

标签： html angular typescript

【解决方案1】：

你可以像你提到的那样直接传递reouterList，你可以使用@Output从子菜单到主组件获取routerlist，如下所示

<main-component [menuItems]="routerlist">
  <submenu [menuItems]="routerlist" (getRouterList)= getRouterList($event)></submenu>
  <router-outlet></router-outlet>
</main-component>

【讨论】：

【解决方案2】：

检查这个 stackblitz 链接。 stackblitz link

这里，首先

默认组件 C 加载到 <router-outlet>。然后使用(activate)事件我们可以获取EventEmitter的数据并将数据传递给app.component.ts函数outputListEmitter(event)，我们必须在这里订阅才能获取发射值的数据。

第二种情况，

是模板中定义的普通手动组件，同一个事件发射器用于获取数据到app.component.ts并传递给模板。要检查此功能，您必须单击 b.component 的按钮，因此 app.component.html 中会显示值更改。

【讨论】：

【解决方案3】：

我为菜单使用了服务。

服务：

@Injectable()
export class SubmenuService {

  private menuItems = new ReplaySubject<any[]>(1);
  public menuItems$: Observable<any>;

  updateSubmenu(data: any[]) {
    this.menuItems.next(data);
  }

  constructor() {
    this.menuItems$ = this.menuItems.asObservable();
  }
}

在我声明子菜单的组件中，我订阅了菜单：

<sub-menu [menuItems]="subMenuItems"></sub-menu>

并且在“router-outlet”组件中设置了项目。 Router-outlet组件ts：

updateSubmenu(): void {
    const _routerlist: any[] = [];
    _routerlist.push(
      { route: '/somepath', title: 'menu item 001' },
      { route: '/someotherpath', title: 'menu item 002' },
    );

    this.submenuService.updateSubmenu(_routerlist);
  }

【讨论】：