angular 4 - 组件内的路由(子路由)无法正常工作 [英] angular 4 - routing within a component(child routes) not working properly

问题描述

我最近开始学习 angular4，目前正在研究 angular 中的路由.我遵循 angular routing docs 并开始实现一些简单的子路由功能.我被它困住了.下面是我的代码.谁能告诉我我做错了什么?

仪表板模块被导入到根模块中，该模块在其内部有自己的路由.app/app.module.ts

import { BrowserModule } from '@angular/platform-b​​rowser';从'@angular/core' 导入 { NgModule };import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };import { PageNotFoundComponent } from './page-not-found/page-not-found.component';从'./dashboard/dashboard.module'导入{DashboardModule}；@NgModule({声明: [应用组件，PageNotFoundComponent,],进口:[浏览器模块，仪表板模块，应用路由模块，],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

具有重定向到仪表板组件的默认路由的根级路由模块.app/app-routing.module.ts

import { NgModule } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './login/login.component' 导入 { LoginComponent };import { PageNotFoundComponent } from './page-not-found/page-not-found.component';const 路由:路由 = [{小路: ''，重定向到:'仪表板'，路径匹配:'完整'},{路径:'仪表板'，loadChildren: 'app/dashboard/dashboard.module#DashboardModule',数据:{预加载:真}},{路径:'登录'，组件:登录组件，},{小路: '**'，组件:PageNotFoundComponent}];@NgModule({进口:[RouterModule.forRoot(路由)],出口:[路由器模块]})导出类 AppRoutingModule { }

这是仪表板模块中存在的子路由的路由配置app/dashboard/dashboard-routing.ts

import { NgModule } from '@angular/core';从@angular/router"导入 { RouterModule, Route };import { DispatchesComponent } from './dispatches/dispatches.component';从 './dashboard.component' 导入 { DashboardComponent };从 './transactions/transactions.component' 导入 { TransactionsComponent };const dashBoardRoutes : Route[] = [{路径:'仪表板'，组件:仪表板组件，路径匹配:'完整'，孩子们: [{路径:'调度'，组件:调度组件},{路径:'txns'，组件:事务组件},{小路: ''，组件:调度组件，路径匹配:'完整'},]},]@NgModule({进口:[RouterModule.forChild(dashBoardRoutes)],声明:[]，出口:[路由器模块]})导出类 DashboardRoutingModule { }

最后我将这些路由导入到仪表板模块中app/dashboard/dashboard.module.ts

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从 './dashboard.component' 导入 { DashboardComponent };从 '@angular/router' 导入 { RouterModule };从 './../shared/shared.module' 导入 { SharedModule };从'./dashboard-routing.module'导入{DashboardRoutingModule}；import { DispatchesModule } from './dispatches/dispatches.module';从 './transactions/transactions.module' 导入 { TransactionsModule };@NgModule({进口:[调度模块，通用模块，共享模块，交易模块，路由器模块，仪表板路由模块，],声明:[仪表板组件]})导出类 DashboardModule { }

这是仪表板组件中的htmldashboard.component.html

仪表板工作！</p><button routerLink="/login">进入登录</button><div><app-sidebar></app-sidebar>

<div class="dashboard-routes"><button routerLink="dispatches">dispatches</button><button routerLink="txns">交易</button>

<div><路由器插座></路由器插座>

当我导航到 localhost:4200 时，它按预期成功重定向到仪表板并在其中显示调度组件.

但是当我点击 dispatches 或 txns 时.这些子组件不在仪表板 router-outlet 内呈现.并转到下面的这个页面

我做错了什么?

解决方案

进行以下更改:

import { Routes } from '@angular/router';const dashBoardRoutes : 路由 = [{小路: ''，组件:仪表板组件，孩子们: [{路径:'调度'，组件:调度组件},{路径:'txns'，组件:事务组件},{小路: ''，组件:调度组件},]},]

使用旧配置，要呈现DashboardComponent，您需要导航到:

root/dashboard/dashboard

这是因为您在主路由配置中已经使用 dashboard 为所有延迟加载的路由添加前缀.

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?

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 { }

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 { }

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 { }

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 { }

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>

When I navigate to localhost:4200 it sucessfully redirects to dashboard as expected and displaying dispatches component inside it.

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

What am I doing wrong?

解决方案

Do the following changes:

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

const dashBoardRoutes : Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: 'dispatches',
        component: DispatchesComponent
      },
      {
        path: 'txns',
        component: TransactionsComponent
      },
      {
        path: '',
        component: DispatchesComponent
      },
    ]
  },
]

With the old configuration, to render DashboardComponent, you would need to navigate to:

root/dashboard/dashboard

This is because you are prefixing all the lazy loaded routes with dashboard already in the main routing config.

这篇关于angular 4 - 组件内的路由(子路由)无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！