Наличие более одного app.component в угловых 7

Question

Будучи новичком в angular, я хочу структурировать свой layout на два

1. без navigation
2. с 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 { }

Таким образом вы достигнете целых маршрутов

URL будут выглядеть так:

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>