1

我试图通过构建一个包含欢迎和后端两个部分（想想登录页面和主站点）的站点的基本结构来了解 Angular 2 (RC5) 模块的延迟加载。我已经按照功能模块上的 Angular 2 文档进行了设置，一个用于欢迎部分，一个用于后端。它正确地默认为欢迎组件，但我在欢迎组件中应该链接到“后端”路由的按钮改为“欢迎/后端”。仅使用 /backend 输入 url 将转到 /backend/welcome。这是我的 app.routing.ts 文件：

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

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full'},
  { path: 'backend', loadChildren: 'app/backend/backend.module' }
];

export const routing = RouterModule.forRoot(routes);

还有我的welcome.routing.ts：

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

import { WelcomeComponent } from './welcome.component';

export const routing = RouterModule.forChild([
    { path: 'welcome', component: WelcomeComponent}
]);

还有我的welcome.component.ts：

import { Component } from '@angular/core';

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

无论如何，这里是整个应用程序的 plunk 以使其更容易Plunkr。重要的是在欢迎和后端文件夹中。单击登录应显示带有注销按钮的后端，该按钮将您带回欢迎页面。

任何建议，将不胜感激。

4

2 回答 2

4

你的 plunkr 有很多问题。这是工作示例https://plnkr.co/edit/QciaI8?p=preview

路由器链接已移至 app.component

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>Module Test</h1>
        <nav><a routerLink="../backend">Logins</a></nav>
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }

您还需要 backend.routing.ts

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

import { BackendComponent }    from './backend.component';

const routes: Routes = [
  { path: '', redirectTo: 'backend', pathMatch: 'full'},
  { path: 'backend',    component: BackendComponent }
];

export const routing = RouterModule.forChild(routes);

Backend.module 更改为

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BackendComponent }  from './backend.component';
import { routing }            from './backend.routing';

@NgModule({
    imports:      [  routing ],
  declarations: [ BackendComponent ]
})
export default class BackendModule { }
于 2016-08-15T14:15:35.490 回答
2

我终于通过弄清楚路由器从嵌套模块中堆叠路由（例如，app.routing 中的“后端”路由和 backend.routing 中的“后端”导致“/后端/后端”作为 url）来开始工作。所以解决方案是有一个 backend.routing.ts 和一个单一的路由 { path: '', component: BackendComponent }。还需要在 routerLink 值中添加 /（例如 /backend 而不是 backend）。这是我最终的 backend.routing.ts：

import { Routes, RouterModule }  from '@angular/router';
import { BackendComponent }    from './backend.component';

const routes: Routes = [
    { path: '', component: BackendComponent }
];

export const routing = RouterModule.forChild(routes);

和 backend.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';

@NgModule({
    imports: [ routing ],
    declarations: [ BackendComponent ]
})
export default class BackendModule { }

欢迎.component.ts：

import { Component } from '@angular/core';

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

后端组件.ts

import { Component } from '@angular/core';

@Component({
    template: `
        <h2>Backend</h2>
        <nav><a routerLink="welcome">Logout</a></nav>
    `
})
export class BackendComponent { }

这导致登录按钮将我带到 /backend，而注销按钮将我带到 /welcome。这是 plunk 的链接：Plunker

于 2016-08-15T16:49:54.173 回答