从父Angular 7 / IONIC 4确定当前路由的组​​件

Question

关于该主题的文章很多，但是似乎没有人在做我想要的事情，因此虽然我认为我很亲密，但实际上我可能采取了错误的方法。

从IONIC 4选项卡组件中，我需要获取当前活动的组件对象，并从中获取一些上下文信息（当前为唯一的标题字符串，稍后会有更多信息）。

我的主要导航是一个名为TabsPage的组件，其中包含一个可观察的内容，用于观看导航更改并更新显示的信息。

当前，我似乎只能获得代表TabsPage本身的组件对象，而不是活动路径“末端”的组件对象。

如何识别和检索该页面组件？

当前实施；

export class TabsPage implements OnInit {

  title = '(untitled)';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    public nav: NavController // not used
    ) {}

  ngOnInit() {
    this.router.events.pipe(
      filter((event: any) => event instanceof NavigationEnd)
    ).subscribe(event => {

      // Here I am trying to get the active component 'page' that is loaded
      const c = this.route.component.valueOf();

      // Here I use a typeguard to determine if it's a `NamedPage`,
      // and if so, get the text to display
      if(isNamedPage(c)) {
        this.title = c.toString();
      } else {
        this.title = '(untitled)';
      }

  });

}

title绑定到我的模板中以显示当前字符串。

<h2>{{ title }}</h2>

NamedPage界面；

declare interface NamedPage {
    pageName: string;
    toString();
}

每个页面组件可以实现NamedPage不同，因此给定的页面组件可能看起来像这样；

export class ToolsPage implements OnInit, NamedPage {
  pageName: string;

  toString(): string {
    return 'Tools page #1';
  }
}

请注意，可能会有多层导航； Tabstrip，侧边栏和页面层次结构可能有多个层次。

我没有具体定义任何<router-outlet>，因为<ion-tab>元素似乎没有使用它。