Предоставить содержимое компонента из маршрутизируемого одноуровневого компонента - PullRequest
Новая
       21

Предоставить содержимое компонента из маршрутизируемого одноуровневого компонента

0 голосов
/ 05 ноября 2018

Приложение My Angular использует RouterModule для навигации по различным компонентам. Он имеет глобальную панель инструментов над перенаправленным компонентом: 

// app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <div class="toolbar">
        <!-- ... -->
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

Панель инструментов содержит меню. Моя цель - разрешить компонентам расширять меню панели инструментов с помощью действий, специфичных для компонентов.

enter image description here

Моя простая идея состояла в том, чтобы написать собственную директиву, которая будет содержать шаблон расширения панели инструментов каждого компонента. Шаблон компонента будет выглядеть так: 

<!-- b.component.html -->
<div appToolbar title="Title of Component-B">
  <a class="nav-link" (click)="action1()">menu-entry 1 of component B</a>
</div>
Content of Component-B

Мой компонент приложения будет искать элемент [appToolbar] с @ViewQuery(ToolbarDirective, {read: ElementRef}). Это позволило бы мне переместить узел DOM расширения панели инструментов на фактическую панель инструментов.

Однако это не работает, потому что @ViewChild не находит внуков.

Обходной путь - использовать router-outlet (activate) событие, которое предоставляет ссылку на экземпляр компонента: 

<router-outlet (activate)="onActivate($event)"></router-outlet>

Тогда мои компоненты A и B должны предоставить запрос вида: 

@Component(/* ... */)
export class AComponent {
  @ViewChild(ToolbarDirective, {read: ElementRef}) toolbarElRef;
}

И мой компонент приложения может получить к ним доступ: 

onActivate(component) {
  // Move DOM of component.toolbarElRef.nativeElement with Renderer2
}

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

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

...