1

私は、ウェルカムとバックエンドの 2 つのセクション (ログイン ページとメイン サイトを考えてください) を持つサイトの基本構造を構築することによって、モジュールの Angular 2 (RC5) 遅延読み込みに頭を悩ませようとしています。機能モジュールに関する Angular 2 ドキュメントに従ってセットアップしました。1 つはウェルカム セクション用、もう 1 つはバックエンド用です。デフォルトではウェルカム コンポーネントに正しく設定されていますが、「バックエンド」ルートにリンクするはずのウェルカム コンポーネントのボタンが代わりに「ウェルカム/バックエンド」に移動します。/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」ルートと backend.routing の「backend」は、URL として「/backend/backend」になります）。したがって、解決策は、単一のルート { path: '', component: BackendComponent } を持つ backend.routing.ts を持つことでした。また、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 { }

歓迎.コンポーネント.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 { }

これにより、ログイン ボタンで /backend に移動し、ログアウト ボタンで /welcome に移動できました。plunkへのリンクは次のとおりです: Plunker

于 2016-08-15T16:49:54.173 に答える