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