Загрузка компонента без корневого компонента в угловой

Question

Я начинаю изучать угловой 6. У меня есть ситуация, когда я хочу показать страницу с другим HTML без использования верхнего и нижнего колонтитула.Я добавил в файл app.component.html:

<app-header></app-header>

<router-outlet></router-outlet>
<app-footer></app-footer>

Теперь я хочу загрузить компонент без использования корневого компонента.

Answer 1

Я думаю, вы можете использовать для этого «ng-template»;

Сначала создайте модуль маршрутизации, подобный этому;

const routes: Routes = [

    { 
    path: 'login',
    component: LoginComponent,
    data: { showRootComponents: false } 
    },
    { 
    path: 'home',
    component: HomeComponent,
    data: { showRootComponents: true } 
    }

]

export const AppRoutingModule = RouterModule.forRoot(routes);

И импортируйте его в свой AppModule;

@NgModule({
  declarations: [
    AppComponent,
  HomeComponent,
  LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule   
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

Тогда в вашем корневом компоненте;

withoutRootComponents:boolean

public constructor(private activatedRoute:ActivatedRoute) {
    this.withoutRootComponents = activatedRoute.snapshot.data['showRootComponents']);
}

и html;

<ng-template [ngIf]="!withoutRootComponents">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</ng-template>

<ng-template [ngIf]="withoutRootComponents">
   <router-outlet></router-outlet>
</ng-template>

Answer 2

Ну, вы должны создать маршрутизатор, вот пример:

В app.module.ts добавить:

import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

И в вашем app.component.html у вас есть <router-outlet></router-outlet>, и это место, где угловые компоненты вводятся через маршрутизатор, поэтому удалите верхний и нижний колонтитулы и поместите их на страницы (компоненты), которые вам нужны.