[英]Why dont we add 'ngModule' in decorator array of app.module.ts
[英]Why "bootstrap" key in @NgModule is not working when you build the same structure than App.module.ts?
我需要在我的項目中創建一個管理模塊,我打算對我的所有管理員使用一個布局。 所以我認為使用 NgModule Bootstrap 是 Angular 中最好的選擇。
// ./admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
// ...
@NgModule({
declarations: [
AdminComponent,
LayoutComponent,
],
imports: [
CommonModule,
AdminRoutingModule,
//...
RouterModule,
],
bootstrap: [AdminComponent],
})
export class AdminModule {}
// ./admin.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: [],
})
export class AdminComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
// admin.component.html
<app-admin-layout> <!-- Layout Component -->
<router-outlet></router-outlet>
</app-admin-layout>
// .admin-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
},
{
path: 'home',
loadChildren: () =>
import('./modules/home/home.module').then((m) => m.HomeModule),
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AdminRoutingModule {}
但是,Bootstrap 不起作用。 該頁面僅顯示沒有引導程序組件的 HomeModules 頁面。
我該如何解決?
您的路由模塊和布局組件的層次結構是錯誤的。 您還需要充分注意路由器插座/路由器插座的使用情況。 官方給你一份攻略
這是一個正在運行的stackblitz 示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.