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 ，如下所示。＆GT;

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

Angular2 Componenet仅在刷新

1 个答案: