3

ボタンのクリック時にデータを別のコンポーネントに渡す必要があるコンポーネントがあるため、[routerLink]このようにアンカーでプロパティを使用しました

<a [routerLink]="['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10></a>

app.route.ts で定義された対応するルート

    {
    path: 'employeedetail/:name/:address/:detail3 /:detail4
    /:detail5 /:detail6/:detail7 /:detail8 /:detail9 /:detail10 ',
    component : employeedetailComponent
    }

完璧な世界では動作するはずですが、エラーが発生したため動作しません

zone.js:355Unhandled Promise の拒否: サポートされていない純粋な関数の引数の数: 11 ; ゾーン： ; タスク: Promise.then ; 値: エラー: 純粋な関数の引数の数がサポートされていません: 11(…) エラー: 純粋な関数の引数の数がサポートされていません: 11

これについて調査したところ、インライン テンプレートに 10 個の要素があると angular2 ルーターが失敗することがわかりました。URL の最後のパラメーター (detail10) を削除して試してみましたが、エラーはありませんでした。

質問は、[routerlink] を使用してこれらの多数のパラメーターを URL に渡す方法です。または、あるコンポーネントから別のコンポーネントにデータを渡すために別のアプローチを使用する必要がありますか?

4

2 に答える 2

1

queryParams を使用して、URL にパラメーターを渡すことができます。

<a [routerLink]="['/employeedetail' , name, address]" [queryParams]="{detail3: detail3, detail4: detail4}">Somewhere</a>

オプションのパラメーターにはクエリパラメーターを使用する方が適しています。これにより、URLが読みやすくなります。

于 2016-11-23T15:26:37.613 に答える
0

テンプレートでビルドする代わりに、ルートを準備して結果を渡すコンポーネントにメソッドを追加します。

  class MyComponent {
    get employeeDetailLink() {
      return ['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10];
    }
  }

そしてそれを次のように使用します

<a [routerLink]="employeeDetailLink"

この制限は最近削除されました (既にリリースされているかどうかはわかりません) https://github.com/angular/angular/pull/12710

https://github.com/angular/angular/issues/12233も参照してください

于 2016-11-23T15:20:31.450 に答える