Angular 模块

一、创建模块

两种方式：

创建模块:
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>