Угловой 2.0.1: упрощение сложного навигационного компонента

Question

Как сохранить компонент навигации, синхронизированный с нетривиальным приложением? Например, в Angular 2's simple Tour of Heroes application, то app.component.ts имеет статическое (т.е. неизменны) декларативное навигации:

<h1>{{title}}</h1> 
<nav> 
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> 
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
</nav> 
<router-outlet></router-outlet> 

Но в более сложных приложениях, навигации компоненты часто является динамической. В моем случае nav имеет sidenav, a назад кнопка, специфичная для компонента действия и информация о пользователе; и sidenav и действия изменяются в зависимости от роли пользователя. Это довольно типичный сценарий - думать о Google Gmail, Входящие, Календарь, Документы и т.п.

Прямо сейчас, мой nav в одном my-header компонент реализован с большим количеством *ngIf тестирования для текущего компонента и роли пользователя - это уродливый кошмар:

<md-toolbar color="primary" class="fixed-toolbar"> 
    <div *ngIf="isAuthenticated()"> 

    <md-menu #mainmenu="mdMenu"> 
     <a md-menu-item routerLink="/marketplaces" routerLinkActive="active">Marketplaces</a> 
     <a md-menu-item routerLink="/people" routerLinkActive="active">People</a> 
     <span *ngIf="isAdministrator()"> 
     <md-divider></md-divider> 
     <a md-menu-item routerLink="/accounts" routerLinkActive="active">Accounts</a> 
     </span> 
    </md-menu> 
    <button *ngIf="_navigation?.toolbar == 'default'" md-icon-button [md-menu-trigger-for]="mainmenu"> 
     <md-icon>menu</md-icon> 
    </button> 

    <button *ngIf="_navigation?.toolbar == 'market'" md-icon-button 
      (click)="closeAndReturn($event, 'marketplaces')" 
      aria-label="Back to Marketplaces"> 
     <md-icon>close</md-icon> 
    </button> 

    <button *ngIf="_navigation?.toolbar == 'person'" md-icon-button 
      (click)="closeAndReturn($event, 'users')" 
      aria-label="Back to People"> 
     <md-icon>close</md-icon> 
    </button> 
    </div> 

    <!-- ^^^ nightmare continues vvv --> 

my-header компонент просто включен в app.component.html:

<my-header></my-header> 
<router-outlet></router-outlet> 
<my-footer></my-footer> 

Но ни my-header компонент, ни my-footer компоненты находятся в маршрутизаторе дерева так my-header «ы впрыскиваемого ActivatedRoute всегда корневой узел, который означает, что я не могу даже переход абсолютным назад навигации:

(click)="closeAndReturn($event, 'marketplaces')" 

относительной навигации:

(click)="closeAndReturn($event, '../')" 

, что означает дублирование дерева маршрутизатора в этом одном компоненте, чтобы оставаться синхронизированным - это, очевидно, не Right Thing ...

Любые идеи о том, как решить эту проблему, по-видимому, очень часто, чтобы сохранить компонент навигации в синхронизации со сложным приложением?

Answer 1

Для решения относительной навигации аспекта, прослушивать события в маршрутизаторе и захватить URL:

constructor(private _router: Router) { 
    this._router.events 
      .filter(e => e instanceof NavigationEnd) 
      .subscribe(e => this._currentUrl = e.url); 
    } 

Затем обрезать последний сегмент URL к шагу на один уровень вверх:

closeAndReturn(event?) { 
    const url = this._currentUrl; 
    const path = url.slice(0, url.lastIndexOf('/')); 

    this._router.navigate([path]); 
    } 

В HTML является более чистым и менее повторяющимся:

<button md-icon-button (click)="closeAndReturn($event)" aria-label="Back"> 
    <md-icon>close</md-icon> 
</button> 

Но все еще много дублированных роутеров inf ormation в HTML.