0

重要なアプリケーションとのナビゲーション コンポーネントの同期をどのように維持しますか? たとえば、Angular 2 の単純な Tour of Heroes アプリケーションでは、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>

しかし、より複雑なアプリケーションでは、ナビゲーション コンポーネントが動的であることがよくあります。私の場合、navsidenav 、戻るボタン、コンポーネント固有のアクション、およびユーザー情報があります。また、サイドナビゲーションとアクションは、ユーザーの役割に応じて変化します。これはかなり典型的なシナリオです。Google Gmail、Inbox、Calendar、Docs などを考えてみてください。

現在、myは、現在のコンポーネントとユーザーの役割について多くのテストを行って実装さ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, '../')"

これは、同期を維持するために、この 1 つのコンポーネントでルーター ツリーを複製することを意味します。これは明らかに正しいことではありません...

ナビゲーション コンポーネントを複雑なアプリケーションと同期させるという、おそらく非常に一般的なこの課題をどのように解決するかについてのアイデアはありますか?

4

1 に答える 1

0

相対ナビゲーションの側面に対処するには、ルーターでイベントをリッスンし、URL をキャプチャします。

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

次に、最後の URL セグメントをトリミングして 1 レベル上げます。

  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>

しかし、HTML には重複したルーター情報がまだたくさんあります。

于 2016-09-28T22:16:52.210 に答える