Question

我試圖建立一個角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如下。 >

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