web-dev-qa-db-ja.com

angular2のapp.component.htmlの* ngIfでルーターアウトレットを変更する

私はangular 2.0 finalを使用しています。メインのapp.component.htmlでrouter-outletの場所を変更しようとしています。テンプレートは細かい表示を更新していますそれ以外は、最初にrouter.navigateを使用したときにコンポーネントが新しいrouter-outletに表示されず、エラーも発生しません。router.navigateを使用した後、2回目と毎回は正しく機能します。

app.component.htmlのテンプレート例

   <div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
angularangular2-routingangular2-template
13
Optimizal

名前付きのrouter-outletを使用してください。これは問題なく機能しますが、問題は、このようなURLはユーザーフレンドリーではなく、個人的にアウトレット名のURLが意味をなさないと考えていることです。

例：-

ルート

{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }

ブラウザのアドレスバーに出力

http：// localhost：4200 /（notlogedin：forgotPassword）

それがアドレスバーでどれほど愚かに見えるかを見てください。

したがって、*ngIfを使用して条件付きで無効にして有効にし、router-outletを使用して問題を解決しようとしても、機能しません。 1つのrouter-outletが登録され、何をしても、次のrouter-outletはルートの変更に応答しません。

だからここに解決策があります

ngTemplateOutletとng-templateを使用すると、router-outletを1つだけ保持することで、この問題の適切な解決策を提供できます。以下のサンプルコードを参照してください。

<ul>
  <li><a routerLink="/login">login</a></li>
  <li><a routerLink="/dashboard">dashboard</a></li>
</ul>

<!--This is where my before login router stays-->
<div class="logedIn-route" *ngIf="routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<!--This is where my after login router stays-->
<div class="logedout-route" *ngIf="!routerActive">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>


<ng-template #template>
  <router-outlet>
  </router-outlet>
</ng-template>

フィドルを試す

https://jsfiddle.net/imal/e4tyqv95/36/

12
imal hasaranga perera

代わりに、名前付きrouter-outletの使用を検討する必要があります。

それはドキュメントで述べています：テンプレートは名前のない1つだけを保持できます

<div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet name="notloggedin">
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet name="loggedin">
      </router-outlet>
    </div>

ルーターは次のようになります。

{ path: 'page1', component: Page1Component, outlet: 'notloggedin' },
{ path: 'page2', component: Page2Component, outlet: 'loggedin' }

ここ 例 @yurzuiの この投稿 から。

7
Edmar Miyake

私はViewContainerRefを使用して、モバイルとデスクトップの両方が同じルーターコンセントを利用できるようにする必要がありました。

<!-- MOBILE -->
<div *ngIf="isMobile">
  <div #mobileOutlet></div>
</div>

<!-- DESKTOP -->
<div *ngIf="!isMobile">
  <div #desktopOutlet></div>
</div>

<ng-template #tpl>
  <router-outlet></router-outlet> 
</ng-template>

そして、私はcreateEmbeddedViewを両方に使用しても問題ありませんでした：

@ViewChild('mobileOutlet', { read: ViewContainerRef }) _vcrMobile;
@ViewChild('desktopOutlet', { read: ViewContainerRef }) _vcrDesktop;
@ViewChild('tpl') tpl;

ngAfterViewInit() {
  if (this.isMobile) this._vcrDesktop.createEmbeddedView(this.tpl);
  else this._vcrMobile.createEmbeddedView(this.tpl);
}

唯一のことは、ブレークポイントを切り替える場合、このアウトレットを切り替える必要があるということです。たとえば、デスクトップからモバイルへのサイズ変更：

this._vcrDesktop.clear();
this._vcrMobile.createEmbeddedView(this.tpl)
0
Nate May

このようなユーザールーティングは、名前付きアウトレットの問題を解決します

{
    path: 'login',
    children: [
      {
        path: '',
        component: LoginComponent,
        outlet: 'loutlet',
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent,
  }
0
Prasoon Shrivastava