web-dev-qa-db-ja.com

Angular 2ルートルーターを指す子にrouterLinkを追加

現在、Angular 2 Beta 8を使用してWebアプリを開発しています。routerLinkディレクティブを使用すると、ネストされたルートで問題が発生します。

ルーターの階層は次のとおりです。

AppCmp
|-> NewItemFormCmp
|-> UserDashboardCmp
    |-> MyItemsCmp

関連するコンポーネントは次のとおりです。

@Component({
    ...
})
@RouteConfig([
    {component: NewItemFormCmp, name: 'NewItemForm', path: '/item/new'},
    {component: UserDashboardCmp, name: 'UserDashboardCmp', path: '/me/...', useAsDefault: true}
])
export class AppCmp {

}


@Component({
    ...
})
@RouteConfig([
    {component: MyItemsCmp, name: 'MyItemsCmp', path: '/items', useAsDefault: true}
])
export class UserDashboardCmp {

}


@Component({
    template: `
        ...
           a([routerLink]='["NewItemForm"]'
        ...
    `
})
export class MyItemsCmp {

}

MyItemsCmpへのネストされたルーティングは完全に正常に機能します。ここで、コンポーネントのテンプレートに示されているように、routerLinkディレクティブを使用してNewItemFormCmpに移動するためのボタンをMyItemsCmpに実装したいと思います。

コンポーネント 'MyItemsCmp'が読み込まれると、テンプレートのすべての要素がブラウザにレンダリングされます。ただし、NewItemFormCmpへのリンクが機能しておらず、コンソールに例外があります。

Uncaught EXCEPTION: Component "MyItemsCmp" has no route config. in [["NewItemForm"] in MyItemsCmp@x:xxx]

コンストラクターにルーターを挿入すると、RootUserに移動し、「navigate」を使用して指定されたルートに移動できます。

RouterLinkディレクティブを使用して、第2レベルの子コンポーネントから第1レベルの子に移動するにはどうすればよいですか？

ありがとう、フィリップ

javascriptroutingangularrouterangular2-routing
8
PS1290

ルートルートを変更したい場合は、

 <a[routerLink]='["/NewItemForm"]'
13
Günter Zöchbauer

コンポーネントのインスタンス化中のRouterOutletディレクティブは、ChildRouterを作成し、「Router」として挿入します。したがって、RouterOutletに動的に挿入されるコンポーネントには、独自のネストされたルーターがあります（RouteConfigはありません）。これらのルーターは木の葉のようなものです。

そのため、このルーターのホストコンポーネントにルートが構成されていないと文句を言います。

あなたがしなければならないのはこのようにそれを書くことです：

<a [routerLink]="['../NewItemForm']">

ルーターツリーに一歩戻る

（Angular 2.0.0-beta.9）で私のために働いた

2
Pio
import {Router} from 'angular2/router';

<button (click)="goToParent()">Goto Parent</button>\

export class MyItemsCmp {

  constructor(router:Router){
      this.router=router;
  }

  goToParent()
  {
    this.router.parent.navigate(['/item/new']);
  }

}

この例を私のルーティングで確認してください。必要なことを実行します

0
micronyks