html - 将路由器出口变量传递给父组件

Question

主要成分：

<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 传递给主组件，以便子菜单可以使用它？

Answer 1

您可以按照您提到的方式直接传递reouterList，您可以使用@Output如下方式从子菜单获取路由器列表到主组件

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

Answer 2

检查这个 stackblitz 链接。堆栈闪电链接

• 在这里，首先

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

• 第二种情况，

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

Answer 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>

并在“路由器插座”组件中设置项目。路由器出口组件 ts：

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

    this.submenuService.updateSubmenu(_routerlist);
  }