子模块 article-routing.module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ArticleComponent} from './article.component';
import {ArticlelistComponent} from './components/articlelist/articlelist.component';
import { from } from 'rxjs';
const routes: Routes = [
{
path:'',
component:ArticleComponent
},
{
path:'list',
component:ArticlelistComponent
}
];
// forChild :用在子模块加载路由配置
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ArticleRoutingModule { }
子模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ArticleRoutingModule } from './article-routing.module';
import { ArticleComponent } from './article.component';
import { ArticlelistComponent } from './components/articlelist/articlelist.component';
import { InfoComponent } from './components/info/info.component';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [ArticleComponent, ArticlelistComponent, InfoComponent],
imports: [
CommonModule,
ArticleRoutingModule,
FormsModule
]
})
export class ArticleModule { }
根模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path:'article',
// loadChildren:'./module/article/article.module#ArticleModule' // 方式一
//方式二
loadChildren: () => import('./module/article/article.module').then( m => m.ArticleModule)
},
{
path:'user',
loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)
},
{
path:'product',
loadChildren: () => import('./module/product/product.module').then( m => m.ProductModule)
},{
path:'**',
redirectTo:'article'
}
];
// forRoot 用在根模块加载路由配置
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
根模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import {counterReducer,todoReducer} from './store/reducer';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {UserModule} from './module/user/user.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
UserModule,
FormsModule,
StoreModule.forRoot({
count:counterReducer,
todos:todoReducer
})
//注册store
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
根模块html
<div class="header">
<a [routerLink]="['/article']" >文章模块</a>
</div>
<router-outlet></router-outlet>//自动匹配