角度4-组件内的布线(子布线)无法正常工作 [英] angular 4 - routing within a component(child routes) not working properly
问题描述
我最近开始学习angular4,目前正在从事angular的布线工作.我关注了角路由文档,并开始实现子路由的一些简单功能.我坚持下去.下面是我的代码.有人可以告诉我我在做什么错吗?
I recently started learning angular4 and currently working on routing in angular. I followed angular routing docs and started implementing some simple functionality of child routing. And I am stuck with it. Below is my code. Can anybody please tell what am I doing wrong?
仪表板模块被导入到根模块中,该模块在其内部具有自己的路由.
app/app.module.ts
Dashboard module is imported into root module which has its own routes insite it.
app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
],
imports: [
BrowserModule,
DashboardModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
根级路由模块,该模块具有重定向到仪表板组件的默认路由.
app/app-routing.module.ts
Root level routing module which has default route that redirects to dashboard compoent.
app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module#DashboardModule',
data: {preload: true}
},
{
path: 'login',
component: LoginComponent,
},
{
path: '**',
component: PageNotFoundComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
这是仪表板模块中存在的子路由的路由配置
app/dashboard/dashboard-routing.ts
This is the routing configuration for child routes present in dashboard module
app/dashboard/dashboard-routing.ts
import { NgModule } from '@angular/core';
import { RouterModule, Route } from '@angular/router';
import { DispatchesComponent } from './dispatches/dispatches.component';
import { DashboardComponent } from './dashboard.component';
import { TransactionsComponent } from './transactions/transactions.component';
const dashBoardRoutes : Route[] = [
{
path: 'dashboard',
component: DashboardComponent,
pathMatch: 'full',
children: [
{
path: 'dispatches',
component: DispatchesComponent
},
{
path: 'txns',
component: TransactionsComponent
},
{
path: '',
component: DispatchesComponent,
pathMatch: 'full'
},
]
},
]
@NgModule({
imports: [
RouterModule.forChild(dashBoardRoutes)
],
declarations: [],
exports: [
RouterModule
]
})
export class DashboardRoutingModule { }
最后,我将这些路线导入了仪表板模块
app/dashboard/dashboard.module.ts
And finally I imported these routes into dashboard module
app/dashboard/dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { RouterModule } from '@angular/router';
import { SharedModule } from './../shared/shared.module';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DispatchesModule } from './dispatches/dispatches.module';
import { TransactionsModule } from './transactions/transactions.module';
@NgModule({
imports: [
DispatchesModule,
CommonModule,
SharedModule,
TransactionsModule,
RouterModule,
DashboardRoutingModule,
],
declarations: [DashboardComponent]
})
export class DashboardModule { }
这是仪表板组件中的html
dashboard.component.html
And here is html in dashboard component
dashboard.component.html
<p>
dashboard works!
</p>
<button routerLink="/login">Go to login</button>
<div>
<app-sidebar></app-sidebar>
</div>
<div class="dashboard-routes">
<button routerLink="dispatches">dispatches</button>
<button routerLink="txns">Transactions</button>
</div>
<div>
<router-outlet></router-outlet>
</div>
当我导航到localhost:4200
时,它会按预期成功重定向到仪表板,并在其中显示调度组件.
When I navigate to localhost:4200
it sucessfully redirects to dashboard as expected and displaying dispatches component inside it.
但是当我单击调度或txns时.这些子组件未在仪表板router-outlet
中呈现.并转到下面的此页面
But when I click on either dispatches or txns. These child components are not rendering inside dashboards router-outlet
. and taking to this page below
我在做什么错了?
推荐答案
进行以下更改:
import { Routes } from '@angular/router';
const dashBoardRoutes : Routes = [
{
path: '',
component: DashboardComponent,
children: [
{
path: 'dispatches',
component: DispatchesComponent
},
{
path: 'txns',
component: TransactionsComponent
},
{
path: '',
component: DispatchesComponent
},
]
},
]
使用旧配置,要渲染DashboardComponent
,您需要导航至:
With the old configuration, to render DashboardComponent
, you would need to navigate to:
root/dashboard/dashboard
这是因为您要在主路由配置中为所有延迟加载的路由添加dashboard
前缀.
This is because you are prefixing all the lazy loaded routes with dashboard
already in the main routing config.
这篇关于角度4-组件内的布线(子布线)无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!