我有一个简单的登录和主页,其中主页正在延迟加载。这是有效的,但路由到主页的子节点不起作用。我对如何解决这个问题很感兴趣。如果路由被声明为routelink它可以工作,但如果通过this.route.navigate(['about'])调用它,它就无法正常工作。
我从调试控制台得到的错误是
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'about'
Error: Cannot match any routes. URL Segment: 'about'
at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (VM4677 vendor.bundle.js:96886)
//app.module.app
@Component({
selector: 'app-root',
templateTemplate: ` <router-outlet></router-outlet>`,
styleUrls: ['./app.component.css'],
providers: [ ]
})
export class AppComponent implements OnInit, OnDestroy {
constructor( ) {} // , private chat: ChatService ) { }
ngOnInit(): void {
}
ngOnDestroy() {
}
}
//app-routing.module.ts
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'mainpage', loadChildren: 'app/mainpage/mainpage.module#MainpageModule' },
{ path: '', redirectTo: '/', pathMatch: 'full' },
];
@NgModule({
imports: [ RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
//mainpage.routing.ts
const childroutes: Routes = [
{ path: '', redirectTo: 'mainpage', pathMatch: 'full'},
{ path: 'mainpage', component: MainpageComponent ,
children: [ {path: 'about', component: AboutComponent} ]
}
];
export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);
const newLocal: NgModule = {
imports: [RouterModule.forChild(childroutes) ],
exports: [RouterModule, ],
declarations: []
};
@NgModule(newLocal)
export class MainRoutingModule { }
//mainpage.component.ts
@Component({
selector: 'app-main',
templateTemplate: `<div fxLayout="row">
<!-- <div fxFlex="25"> <a [routerLink]="['about']"> About</a>
</div> -->
<div fxFlex="10"><button (click)="onClicked()">about</button> </div>
<div fxFlex="nogrow"> <p>New</p> <router-outlet></router-outlet></div>
</div>`,
})
public onClicked() {
this.route.navigate(['about']);
}