在 Angular 7 中有多个 app.component答案

【问题标题】：Having more than one app.component in angular 7在 Angular 7 中有多个 app.component
【发布时间】：2020-09-18 02:47:46
【问题描述】：

作为angular 的新手，我想将我的layout 分成两部分

没有navigation
与navigation

问题：是否可以有多个app.component，如果可以，如何？

app.component.html：

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

external.component.html：

<router-outlet></router-outlet>

【问题讨论】：

您考虑在哪种情况下使用两个 app.component.ts？
我想要实现的是没有导航的页面（例如登录、注册）和有导航的页面（例如仪表板、设置）
有一种解决方案可以实现这一点..让我回答一下，但没有两个 app.component.ts
因为保存在 app.component.html 我的想法是有另一个没有导航

标签： angular layout

【解决方案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 { }

这样你就可以完成整个路线

网址会是这样的：

https://localhost:4200/auth/login

https://localhost:4200/home/dashboard/23

如果用户未登录，请参阅我在这里使用 Guard 来保护路由

【讨论】：

酷！导航将添加到哪里？
我的意思是：
我认为你应该将它添加到 home.component.ts

【解决方案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>

【讨论】：

我希望登录是第一个加载页面，而不是首页。
@codegrid 说真的老兄？这是一个例子......我只是给出这个想法，你可以为你的组件命名你想要的。
感谢您的示例。我已经做到了。我想要的是让登录页面成为登陆或进入页面。
然后将路由定义中的AppComponent替换为LoginComponent。