Question

我是angular的新手，我想将layout分成两个

没有navigation
与navigation

问题：是否可以有1个以上的app.component？

app.component.html：

<app-nav></app-nav>
<section>
  <router-outlet></router-outlet>
</section>

external.component.html：

<router-outlet></router-outlet>

Answer 1

有一个解决方案，无需使用两个app.component.ts。我将文件放在当前项目中使用。

app.component.ts

 <app-http-loader></app-http-loader>
  <div class="app-root-style">
    <router-outlet></router-outlet>
  </div>

app.router-modules.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule', canLoad: [AuthGuard] },
  { path: 'home', loadChildren: './home/home.module#HomeModule', canLoad: [HomeGuard] },
  { path: '**', component: FourZeroFourComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

auth-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'login' },
  { path: 'login', component: LoginComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule { }

home-routing.module.ts

const routes: Routes = [
  {
    path: '', component: HomeComponent, children: [
      { path: 'dashboard/:uid', component: DashboardComponent },
      { path: 'userinfo', loadChildren: '../user/user.module#UserModule', canLoad: [HomeGuard] },
     }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

这样您就可以实现整个路线

网址将如下所示：

loclahost：4200 / auth / login

localhost：4200 / home / dashboard / 23

如果用户未登录，请参阅此处使用 Guard 来保护路由

Answer 2

您可以根据需要拥有任意数量的路由器出口。只需声明您的路线的孩子。像这样：

const routes = [
  { path: '', component: AppComponent, children: [
    { path: 'home', component: HomeComponent, children: [...] },
    { path: 'profile': component: ProfileComponent, children: [...] },
  ]}
];

<!-- Home component template -->
<div>
  <button (click)="login()">Login</button>
  <button (click)="signup()">Sign up</button>
</div>
<router-outlet></router-outlet>

<!-- Profile component template -->
<div>
  <button routerLink="dashboard">Dashboard</button>
  <button routerLink="settings">Settings</button>
</div>
<router-outlet></router-outlet>

在angular 7中有多个app.component

2 个答案: