私のangular2コアモジュールは2.0.2、ルートは3.0.2です。間違ったページへのAngular2ルーティング
rootRouteにapp.routesを、childRouteにmain.routesを1つ宣言すると、基本的なhtml( '/')はchildRouteベース(/ mainなど)にジャンプして間違ったコンポーネントを表示します。
私はすでにindex.htmlにベースhref = "/"を追加しており、ルータのコンセントは正常に動作しています。
私はかなりファイル参照が正しいことを確信しています(2つのルートファイルは同じ名前の "ルート"をエクスポートします)
"/ account"を正しく入力すると、 '/メイン 'と私は理由を知らない。
他の経路は、ここに私のコード
app.module
import {routes} from './app.routes';
@NgModule({
imports: [ BrowserModule, MainModule, routes, ReactiveFormsModule ],
declarations: [ AppComponent, AccountComponent ],
bootstrap: [ AppComponent ],
providers: [ HeroService, TaskService ]
})
export class AppModule { }
アプリがあるなど
.. "/アカウント"、 "/メイン"、 "/メイン/英雄" うまくいきます.routes
import {MAIN_ROUTES} from "./main/main.routes";
const APP_ROUTES: Routes = [
{ path:'', component: AccountComponent},
{ path:'account', component: AccountComponent},
{ path:'main', component: MainComponent, children: MAIN_ROUTES},
];
export const routes = RouterModule.forRoot(APP_ROUTES);
main.module
import {routes} from "./main.routes";
@NgModule({
imports: [ CommonModule, routes, HeroModule, ReactiveFormsModule,TaskModule ],
declarations: [ MainComponent, ManageComponent],
exports: [ MainComponent]
})
export class MainModule { }
main.routes
export const MAIN_ROUTES: Routes = [
{ path:'hero', component: HeroComponent},
{ path:'task', component: TaskComponent},
{ path:'manage', component: ManageComponent},
{ path:'', component: TaskComponent}
];
export const routes = RouterModule.forChild(MAIN_ROUTES);
- ない下手な英語のため申し訳ありません英語のネイティブスピーカー、。私の質問があなたを混乱させるなら、私に知らせてください。
=========(更新)
奇妙なことは、正しいコンポーネントを示して、私は、インデックス(http://localhost:3000)私のmain.routes.ts
export const MAIN_ROUTES: Routes = [
{ path:'main/hero', component: HeroComponent},
{ path:'main/task', component: TaskComponent},
{ path:'main/manage', component: ManageComponent},
{ path:'main', component: TaskComponent}
];
を変更することです。
しかし、 '/ main/hero'と '/ main/main/hero'の両方が動作します。
子ルートが親ルートを追加していないようです。
誰でも問題を再現できますか?ここで何が起こっているのですか?
このリダイレクトをトリガーするために使用しているhtmlテンプレートのサンプルを投稿してください? –
私はブラウザにURLを直接入力しますが、それを起動しません –
空のパスのルートに子がない場合は、{path: ''、コンポーネント:AccountComponent、pathMatch: 'full'}のように 'pathMatch'を追加します。 –