Angular2 Componenetはリフレッシュ時にのみレンダリングされません

Question

私はAngular 2管理アプリケーションを作成しようとしています。ログインに成功したら、ページを更新するときにレンダリングするダッシュボード（DashboardComponenent）にリダイレクトされます。私は問題を解決するためにいくつかの方法を試したが、何も働かなかった。

私は私の問題はApp.componenet.html

<div *ngIf=" title!='login' && title!='signup'&& title!='forgot'&& title!='forgotpass'" class="wrapper"> 
    <div class="sidebar" data-background-color="white" data-active-color="danger"> 
     <sidebar-cmp></sidebar-cmp> 
    </div> 
    <div class="main-panel"> 
     <navbar-cmp></navbar-cmp> 
     <div class="content"> 
      <router-outlet></router-outlet> 

     </div> 
     <footer-cmp></footer-cmp> 
    </div> 
<!-- <fixedplugin-cmp></fixedplugin-cmp> --> 

</div> 
<div *ngIf="title=='login' " class="wrapper"> 
    <router-outlet></router-outlet> 
    </div> 
    <div *ngIf="title=='signup' " class="wrapper"> 
    <router-outlet></router-outlet> 
    </div> 
    <div *ngIf="title=='forgot' " class="wrapper"> 
    <router-outlet></router-outlet> 
    </div> 
    <div *ngIf="title=='forgotpass' " class="wrapper"> 
    <router-outlet></router-outlet> 
    </div> 

からこの問題の原因についての任意のアイデアが来ることを信じますか？

Answer 1

app.module.tsを以下のように変更する必要があります。 >

@NgModule({ imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // <-- debugging purposes only ) // other imports here ], ... }) export class AppModule { }

とconst appRoutes: Routes = [
{ path: 'login', component:YourLoginComponent },
{ path: 'signup', component:YourSignupComponent }, { path: 'forgot', component:YourForgotComponent }, { path: 'forgotpass', component:YourForgotPassComponent }, { path: '', redirectTo: '/login', // in case no path provided pathMatch: 'full' } ];

は、 app.component.htmlであなたが持つことができます

<nav> <a routerLink="/login">Login</a> <a routerLink="/signup">Sign Up</a> <a routerLink="/forgot">Forgot</a> <a routerLink="/forgotpass">Forgot Pass</a> </nav> <router-outlet></router-outlet>

それでは、ここでチャンネルを切り替える リモコンとしてapp.component.html行為でNAVをされて起こります。リモコンの 作業プロセスに関する指示は、appRoutes app.module.tsに定義されています。 は、選択したチャンネルが表示されるテレビ画面として機能します。だから 基本的にあなたのケースでは、複数のルータのアウトレットの使用はありません。

より深く理解するために、あなたは、なぜあなたは `<ルータ・コンセント>`を複数回使用している https://angular.io/guide/router