一、创建模块
两种方式：
创建模块:
ng g module modules/news
创建带路由的模块:
ng g module modules/news --routing
二、创建组件
ng g component module/news
三、在模块ts中设置
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//导入组件
import { NewsComponent } from './news.component';
@NgModule({
//引入组件
declarations: [NewsComponent],
imports: [
CommonModule
],
//外部引用
exports:[NewsComponent],
})
export class NewsModule { }
四、在根模块中设置
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
//导入组件
import { NewsComponent } from './modules/news/news.component';
@NgModule({
//引入组件
declarations: [
AppComponent,
HomeComponent,
NewsComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后就可以正常引用组件了。
五、项目懒加载
1.创建带路由的模块
//创建带路由的模块
ng g module modules/news --routing//创建组件 module.ts会动态加载组件
ng g component modules/news
2.配置模块
在 news.module.ts 配置模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NewsRoutingModule } from './news-routing.module';
import { NewsComponent } from './news.component';
import { TodayComponent } from './today/today.component';
import { HotComponent } from './hot/hot.component';
import { HistoryComponent } from './history/history.component';
@NgModule({
declarations: [NewsComponent, TodayComponent, HotComponent, HistoryComponent],
imports: [
CommonModule,
NewsRoutingModule
]
})
export class NewsModule { }
3.配置路由
在 news-routing.module.ts 配置路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//导入模块
import { NewsComponent } from './news.component';
import { TodayComponent } from './today/today.component';
import { HotComponent } from './hot/hot.component';
import { HistoryComponent } from './history/history.component';
//配置路由
const routes: Routes = [
{
//配置路由 默认加载组件
path:'',component:NewsComponent,
//配置子路由 方式1
children:[
{
path:'today',component:TodayComponent
},
{
path:'hot',component:HotComponent
},],
},
//配置子路由 方式2
{
path:'history',component:HistoryComponent
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NewsRoutingModule { }
配置子路由 方式1 和 配置子路由 方式2 区别：
方式1 是在自己的根模块中加载：
1.png
方式2 是在根(先这样说)模块中加载：
2.png
4.调用自定义模块中的子组件
在 news.component.html 中调用子组件。
注意路由的地址。
<br>
<hr>
<br>
<p>这是新闻的根组件</p>
<a routerLink="/news/today">这是新闻的根组件的超链接 今日新闻</a><br>
<a [routerLink]="[ '/news/history']">这是新闻的根组件的超链接 历史新闻</a><br>
<a [routerLink]="[ '/news/hot' ]">这是新闻的根组件的超链接 热点新闻</a><br>
<router-outlet></router-outlet>
5.在根组件中配置
在 app-routing.module.ts 中配置懒加载
path:'news',loadChildren :'./modules/news/news.module#NewsModule'},
{path:"**",redirectTo:"news"}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path:'news',loadChildren :'./modules/news/news.module#NewsModule'},
{path:"**",redirectTo:"news"}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
6.在根中调用
<a [routerLink]="[ '/news' ]">这是根的一个超链接 新闻</a>
<p>这是根组件</p>
<router-outlet></router-outlet>
<br>
<hr>
<br>
