[武汉|结业弟子]JS-刘平|2019年10月14日的日报-技能树.IT修真院

发表于： 2019-10-14 19:41:15

1 897

今天完成的事情

父子路由

1. 创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';

2. 配置路由

{
  path: 'news',
  component:NewsComponent,
  children: [
    {
      path:'newslist',
      component:NewslistComponent
    },
    {
      path:'newsadd',
      component:NewsaddComponent
    }
  ]
  }

3. 父组件中定义router-outlet

<router-outlet></router-outlet>

Angular 内置模块

Angular 自定义模块

当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组

件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项

目。并且通过Angular 自定义模块可以实现路由的懒加载。

ng g module mymodule

Angular 自定义模块以及配置路由实现模块懒加载

创建模块：

ng g module module/user --routing

ng g module module/article --routing

ng g module module/product --routing

创建组件：

ng g component module/user

ng g component module/user/components/profile

ng g component module/user/components/order

ng g component module/article

ng g component module/article/components/articlelist

ng g component module/article/components/info

ng g component module/product

ng g component module/product/components/plist

ng g component module/product/components/pinfo

配置懒加载

import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{
path:'',component : HomeComponent
},
{
path:'user',loadChildren : './usermodule/usermodule.module#UsermoduleModule'
}
];