Определить в настоящее время маршрутизируемый компонент от родительского Angular 7 / IONIC 4 - PullRequest
Новая
       36

Определить в настоящее время маршрутизируемый компонент от родительского Angular 7 / IONIC 4

0 голосов
/ 23 марта 2019

На эту тему довольно много сообщений, но, похоже, ни одно из них не соответствует тому, что я ищу, поэтому, хотя я и думаю, что я очень близок, на самом деле, возможно, я выбрал неправильный подход.

Из моего компонента вкладок 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';
  }
}

Обратите внимание, что может быть несколько слоев навигации; полоса табуляции, боковые панели и иерархия страниц могут иметь несколько уровней.

Я специально не определил <router-outlet> с, так как элемент <ion-tab>, похоже, не использует это.

...