Question

我试图通过构建一个包含两个部分的站点的基本结构（欢迎和后端（想想登录页面和主站点））来绕过Angular 2（RC5）模块的延迟加载。我按照功能模块上的Angular 2文档设置了它，一个用于欢迎部分，一个用于后端。它正确默认为欢迎组件，但欢迎组件中的按钮应该链接到后端＆＃39;路线前往欢迎/后端＆＃39;代替。用/ 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 { }

无论如何，这里有整个应用程序，以便更容易Plunkr。重要的是欢迎和后端文件夹。单击“登录”应显示“后端”并显示“注销”按钮，该按钮将返回“欢迎”页面。

任何建议都将不胜感激。

Answer 1

你的傻瓜有很多不妥之处。以下是工作示例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 { }

Answer 2

我终于通过弄清楚路由器堆叠来自嵌套模块的路由（例如＆＃39;后端＆＃39;路由在app.routing和＆＃39;后端＆＃39;在backend.routing结果＆＃ 39; / backend / backend＆＃39;作为网址）。因此，解决方案是使用{path：＆＃39;＆＃39;＆＃39;＆＃39;＆n;组件：BackendComponent}的单一路径的后端.routing.ts。还需要在routerLink值中添加/（例如/ 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 { }

welcome.component.ts：

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

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

backend.component.ts

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

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

这导致登录按钮将我带到/后端，并且注销按钮将我带到/欢迎按预期。这是一个指向plunk的链接：Plunker

Angular 2模块延迟加载不起作用

2 个答案: