angular：自定义模块与appmodule的路由跳转（你说算不算父子模块间路由跳转呢？）

最新推荐文章于 2024-07-28 20:30:38 发布

qq_41858755

最新推荐文章于 2024-07-28 20:30:38 发布

阅读量708

点赞数

分类专栏： Angular 文章标签： angular2

本文链接：https://blog.csdn.net/qq_41858755/article/details/107346377

版权

Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开局一张图，内容全靠编！

如图，在主模块App.module下构建了两个自定义的模块A（a-module）和B（b-module），并分别在A模块和B模块下构建了ABCD四个组件（component）。a-component/b-component/c-component/d-component
想要实现的效果是：
fangwezujian
luyou
当然：我失败了！
——————————————————————————————————————————
我们都知道，一个模块是由多个或一个组件组合而成的。
如下图（里面的内容忽略）：
组件模块
那么我们就首先要明白，我们无法直接路由导航到组件上，我们只能导航到模块上！其实正确的说法是：我们只能导航到和module同级的组件上。但是基本和模块同级的组件就是该模块的根【组件】。所以我们完全是可以称导航到【模块】上的！
——————————————————————————————————
上一下逻辑上的代码，方便大家再理解一下，源代码：【github】：
主模块的路由文件【app.router.ts】:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 构建路由内容用于导航到各个子模块
const routes: Routes = [
  {
    path: 'amodule',
    loadChildren: './a-module/a-module.module#AModuleModule',
  },
  {
    path: 'bmodule',
    loadChildren: './b-module/b-module.module#BModuleModule',
  },
  { path: '', redirectTo: 'amodule', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

主模块的module文件【app.module.ts】:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// TODO:6:引入根路由-------------------------------------------------这句是重点
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule } from 'ng-zorro-antd';

// TODO:7:引入a-Module
// import { AModuleModule } from './a-module/a-module.module';
// TODO:8:引入b-module(会报错！)
// import { BModuleModule } from './b-module/b-module.module';


@NgModule({
   declarations: [
      AppComponent,
   ],
   imports: [
      BrowserModule,
      NgZorroAntdModule,
      CommonModule,
      // AModuleModule,  // 先导入子模块
      // BModuleModule, //为啥这个不能引呢？
      AppRoutingModule // 再导入主模块-=-----------------------------这句是重点
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

a-module模块的module文件

import { AModuleComponent } from './a-module.component';

// TODO:2:a-module模块下创建的组件都需要引入进来【引入到a-module.ts模块文件中】
import { AComponentComponent } from './A-component/A-component.component';
import { BComponentComponent } from './B-component/B-component.component';
// TODO:3:要在自己的module.ts文件中引入自己的路由！，不是写到声明里，要写到import中【路由字体的颜色和其他颜色是不一样的】
import { ARouterRoutes } from './a-router.routing'; //-----------------------这是重点



// TODO:1:@NgModule({
//     　　declarations: [], //属于当前模块的组件、指令及管道
//     　　imports: [], //当前模板所依赖的项，即外部模块（包括httpModule、路由等）
//     　　export:[],//声明出应用给其他的module使用
//     　　providers: [], //注入服务到当前模块
//     　　bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性)
//     })

@NgModule({
  declarations: [AModuleComponent, AComponentComponent, BComponentComponent],
  imports: [
    CommonModule,
    ARouterRoutes //---------------------------------------------------------这是重点
  ],
  exports: [
    AComponentComponent,
    BComponentComponent
  ]
})
export class AModuleModule { }

a-module模块的路由文件

import { Routes, RouterModule } from '@angular/router';

// TODO:4:构建路由跳转需要引入我们要跳转的组件！！！
import { AModuleComponent } from './a-module.component';

// TODO:5:修改内部配置（最初加载的时候，路由指向到这里，默认加载A组件内容）
const Aroutes: Routes = [
  {
    path: '',
    component: AModuleComponent,//----------------------这是重点（再说个规律或者规则，路由中出现的组件的html上才会存在<router-outlet>标签。或者父组件。子组件一般不会出现。）
  }
];

export const ARouterRoutes = RouterModule.forChild(Aroutes);