問題タブ [angular2-router3]

次のコードがありました<a routerLink="./edit/{{thing.name}}">{{thing.name}}</a>。次に、編集ルーターには次のものがあります...

constructor( private route: ActivatedRoute ) { // If we have a param the close link goes back 2 level, otherwise it is 1 this.route.params .map(params => params['name']) .subscribe((id) => { if(id){ this.closeLink += "../" } }); ... }

元の HTML を に変更できることに気付きました<a [routerLink]="['edit', {name: thing.name}]">{{thing.name}}</a>。ただし、現在は URL が../thing/edit;name=asdsadsaではなく に変更されてい/edit/asdsadsaます。これらの URL はどちらも機能しますが、後者は 2 レベル戻る必要があり、前者は 1 に戻る必要があります。戻る必要があるレベル数を知るために使用できるルーター サービスまたは何かがあります。これは動的になるに違いなく、常に知っているかどうかはわかりませんthing。

ActivatedRouteObservables が好きparamsかurl、購読されているが購読解除されていない多くの例を見つけました。

• ルート オブジェクトとサブスクリプションは自動的に破棄され、コンポーネントが作成されるたびに新しく作成されますか?
• それらの s からの登録解除について気にする必要がありObservableますか?
• そうでない場合は、 の ActivatedRoute オブジェクトのツリーで何が起こるか説明できますかRouter。routerState?

ルーターからのrouterLinkいくつかに基づいてを表示/非表示にしたい。Dataディレクティブは完了しましたが、最も重要な部分が欠けています...

たとえば、次のルーター構成があります (コンポーネントは省略されています)。

がまたはの場合に使用されるRouterをに尋ねたいと思います。RouterouterLink/foo/bar/baz/123

Routerソース コード ( https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router.ts )を調べましたが、これを行う簡単な方法が見つかりませんでした。特に、これらの:id変数をどのように処理するか。

もちろん、 を反復してRouter.config、さらに深くすることもできます。しかし、その後、それらの変数、正規表現などを解析する必要があります。Angular ルーターも内部でこれらすべてを行う必要があるため、もっと簡単な方法があるはずです。

アイデア/解決策はありますか？

エントリ ページとしてプロジェクトの概要があります。

プロジェクトを開くボタンをクリックすると、projectId が Milesstones ビューに渡されます。マイルストーン ビューにいるときに、projectId を使用してタスク ビューをアクティブにしたいと考えています。

このシナリオは、子ルートであるマイルストーン/タスクで簡単に可能ですが、そうではありません! 3 つのビューはすべてトップ レベルのルートに属します。

子ルートを使用するAFAIKは、コンポーネントもUI階層の子でなければならないことを意味するため、3つの並列/並列ビューを持つことはできません。

他にどうすれば私が望むものを達成できますか?

ここで遊ぶプランカーは次のとおりです。

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

プロジェクトのドロップダウンに新しい projectId が現在のプロジェクトとして表示されないため、URL バーの id パラメータを手動で変更する場合を除いて、すべて正常に機能します。これは、ユーザーが URL をお気に入りのリンクとして保存し、それをコピーして URL バーに貼り付けたときに発生します。私が言うよくあるケース！

これを修正するには、 route.params の変更をリッスンし、変更された ID がそのドロップダウンに存在するTestsListComponentかどうかのチェックを追加します。sharedService/EventEmitterTestsListComponent 内の bool 戻り値 existsProjectId は/projects、ID が存在しなかったためにページにリダイレクトする必要があるかどうかを決定します。

しかし正直なところ、 からのリダイレクトは、TestsListComponent少なくともユーザー エクスペリエンスの観点からは遅すぎますroute projects/:id/tests。

その不正行為をどのように修正しますか？

PS

• おそらく、ProjectsListComponent 内のパスとその ID をリッスンして確認できる、グローバルなパラメーターの変更のようなものがあると思います。

• ウィンドウ モードで plunkr の URL バーを編集してその矛盾をテストする方法を誰かが知っている場合は、その読み取り専用の URL バーを編集可能にした方法を教えてください... URL を新しいタブにコピーしても機能しません。 plunkr not found エラー... => 回答

  1. plunkr をロードし、ウィンドウ モードを有効にします。
  2. ウィンドウ モードで、URL をコピーして新しいタブに貼り付けます
  3. それが貼り付けられたURLの場合: https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
  4. その URL にします: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
  5. パラメータを変更: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
  6. ハッシュを追加しないと、not found 404 が返されます。

ここでのシナリオでは、3 つのルートを持つメインページがあります (各遅延ロードされたメインページの子)。

ここで、補助コンポーネントには 1 つの主要アウトレットとその他の補助アウトレットがあります。

これが私のmainpage.routeファイルの外観です

これで、補助ルートが完全に読み込まれ、プライマリ コンセントに問題なくルーティングできます。しかし、このように補助コンセントにルートをロードしようとするとすぐに

& を使用してそれらをナビゲートしてみてください

(Aux ルートには独自の子が 1 つあり、別のルートを同じ Aux の別の子としてロードしようとしています) エラーが発生します:

Aux ルートをロードおよびルーティングする方法に関するドキュメントが表示されないため、遅延ロードを行う方法を見つけ出すことができます。

正確にどこが間違っているのですか？

これが私のプロジェクト構造です

私のコードはそのようですが、機能しません。ルート読み込み前にユーザー情報を確認したい。

@angular/router:3.4.2 を使用します

リゾルバ クラス:

ルーター:

安全なコンポーネント: