美文网首页
Angular 模块

Angular 模块

作者: _Waiting_ | 来源:发表于2019-08-27 21:09 被阅读0次

    一、创建模块

    两种方式:

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

    相关文章

      网友评论

          本文标题:Angular 模块

          本文链接:https://www.haomeiwen.com/subject/capyectx.html