Angular2組元不僅刷新

我試圖建立一個角2管理應用程序的渲染後，我登錄成功我正在重定向到當我刷新網頁，其中僅呈現在儀表板（DashboardComponenent）。我嘗試了幾種方法來解決這個問題，但沒有任何工作。Angular2組元不僅刷新

我相信我的問題來自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>

關於這個問題的原因你知道嗎？

來源

2017-07-28 Laamiri Oussema

？ –

作爲尼基爾說，你應該只擁有'路由器outlet'標籤一旦在你的頁面。而不是使用ngif有條件地顯示不同的組件，你應該使用實際的路由 - https://angular.io/guide/router。 – instantepiphany

您必須修改app.module.ts如下。 >

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' } ];

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

，然後在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 導航作爲遙控器轉換頻道。關於遙控器的工作過程的說明在appRoutes 下定義，其中app.module.ts。和充當電視屏幕，我們看到所選擇的頻道。所以基本上在你的情況下，沒有使用多個路由器網點。

爲更深入的瞭解，你可以你爲什麼要使用`<路由器出口>`多次經歷 https://angular.io/guide/router

來源

2017-07-28 10:14:03

回答

相關問題