問題タブ [angular2-router3]

AuthRouterOutletDirectiveを拡張したを作成することでログイン/認証が処理された既存の Angular2 アプリがありますRouterOutlet。componentInstructionこれにより、アクティブ化機能でユーザーがログインしているかどうかを確認するのが簡単になりました.次のコンポーネントに移動する前に、Angular2 アプリに保存するトークンを送り返します。

ルーター 3.0.0-alpha.8 にアップグレードしたところ、これはもはやオプションではなく、authGuard を作成し、canActivate認証を処理する方法を使用することで置き換えられていることがわかりました (私は、ドキュメント）。私が苦労している問題は、これは少数のルートのみが保護されているアプリ向けに設計されているように思わcanActivate: [AuthGuard]れ、RouterConfig で認証を必要とする各ルートに追加するだけでよいことです。

私が抱えている問題は、すべてのルートを認証によって保護する必要があることです。また、（より良い修正がない限り）継続的なチェックも必要です。これは、（使用する必要がある外部ログイン サービスが原因の 1 つです）ユーザーをログアウトしてトークンをクリアし、次回新しいルート (ルートが何であるかに関係なく) は、再度ログインするようにリダイレクトする必要があります。すべてのルートに追加できることは理解していcanActivate: [AuthGuard]ますが、それは非常識で退屈な修正のように思えます。特に、大量のルートを持つアプリでは、そのすべてを表示するにはユーザーの認証が必要です。

私は修正を探していましたが、おそらくアップグレードがかなり新しいため、これらの AuthGuard を 1 つまたは 2 つのルートに実装するためのリソースがすべてあるようです。ソース コード (特にhere ) を掘り下げて、すべてのルートに特定のガードを含めるよりも包括的またはより普遍的な方法で拡張できる別の方法があるかどうかを確認しましcanActivateたが、何も見つからないようです。これを実装するための最善の方法についてのアドバイスをいただければ幸いです。ありがとう。

AngularJS 1.x ui-router には、ビューポートという非常に柔軟な概念があります。私には名前付きルートのように思えますが、はるかに柔軟です。

のルートは、ルートのviewportsようなものに分割されていませんprimary/aux。それらは ui-view を使用して html のどこにでも配置され、状態/ルートからビューポート名で参照できます。

現在、viktor savkin による新しい angular 2 ルーター 3 では<router-outlet>、コンポーネントに直接配置されているため、その柔軟性を見つけることができず、バインドされているように見えます。

多分私のアプローチはあまりにもui-routerのようです...

ng2 の angular ui-router は知っていますが、使用したくありません。

私はいくつかのスケッチを作成しました (残念ながら URL にタイプミスがありますが、元のスケッチを失ってしまいました...)。

state/url /projects/1 (angular router 3 alpha を使用したコンポーネントのないルート) にいると、プロジェクトの [開く] ボタンをクリックすると、このプロジェクトの子ミーティングがレンダリングされます

次のように、あるエラーから別のエラーにジャンプしています。

これは、この一般的なシナリオをセットアップするのにかなり面倒です。

私が試したことの1つ：

一目で簡単でより明白な概念を提供する ui-router を試してみてください。

バージョン "@angular/router": "3.0.0-beta.2" を "@angular/*": "2.0.0-rc.4" と組み合わせて、次の公式ドキュメントに従って新しいルーターに切り替えようとしましたコンポーネントルーター。

ただし、デフォルトの HomeComponent を使用してアプリを読み込もうとすると、問題に直面しています。

これは、インライン テンプレート スタイルを使用する代わりに、templateUrl と外部 html ファイルを使用することに関係しているようです。

HomeComponent は最初はウィンドウに表示されず、エラーがコンソールに出力されます。ただし、ホーム コンポーネントへのリンクを使用すると、秒針で表示されます。

私が変わるとすぐに

に

エラーがなくなり、HomeComponent が表示され、ルーティングが期待どおりに機能します。

それは既知の問題ですか？templateUrl を使用している人にとっては機能しますか? それを機能させるために私が尊重しなければならないことはありますか？

Angular 2 の新しい Router 3.0.0-alpha.8 に問題があるようです。

簡単に言うと、私の app.routes.ts は

セクションAのルートをロードします。これは次のとおりです。

しかし、ネストされた SectionAMoreRoutes のロードに失敗します。ロードに失敗したと言うとき、私が得るエラーは次のとおりです。

ルートがネストされている場合、typescript が js にコンパイルされていないようです。私はかなり迷っているので、どのように進めるかについての助けやアイデアが大好きです:(

ありがとう！！！

追加情報: 私の main.ts には次のものがあります。

セクション・ア・モアのルートは次のようになります。

TLDR: ネストされたルートが Angular 2 および Router 3.0.0 でコンパイルされないのはなぜですか?

I'm trying to find a way to handle setting up an Angular2 Typescript route (using the 3.0.0-alpha.8 router) that will handle routes that begin with hash fragments.

The app I'm working on handles all login externally (something I have no control over) through a rails backend with oauth2. Redirecting users to the external login page works fine but when the redirect url, always some form of http://localhost:4200#access_token=TOKEN (where TOKEN is a series of numbers and letters) is sent back but I can't figure out how to set up a route that can handle the # sign so I can catch it and redirect to the appropriate component.

In a previous Angular1 app the ui-router was able to use in a route of:

and this had no problem accepting the redirect url that was sent back and would then pass everything over to the LoginController to handle the rest of the authentication/token business on the front end.

This app however is Angular2 and Typescript and the router query params seem way less flexible and I'm having trouble implementing a similar solution. I've been going based on this section in the docs but all of the examples are building of something else, ex /heroes before getting to the complicated part of the query params, ex /heroes/:id. I searched through stackoverflow as well and wasn't able to find anything that worked with Angular2 and Typescript and the current router.

This is my current (non working) solution:

If I take the redirect url that is sent back and modify it (purely for testing purposes) to something like http://localhost:4200/access_token=TOKEN it works fine. Unfortunately I don't actually have control over the format of the redirect url in real life, and I am unable to come up with a solution that can handle the fact that it begins with a hash fragment rather than a / and then my query params. All of the examples of routing with complicated symbols or characters that I can find begin with a /.

I tried modifying my solution above to be :access_token, which did not work, as well as listing it as a child route under the base route like so:

which resulted in the following console error: platform-browser.umd.js:2312 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

I feel like there absolutely has to be a clean solution to this, especially since so many APIs handle their authentication through a redirect url like this but no matter how much I dig through the docs I can't seem to find it. Any advice on how to implement this would be much appreciated.

このルート構成を取得したとしましょう：

に移動すると

contact Detail に到着しましたが、そこから aux route に移動するにはどうすればよいですか? つまり、何を入れる必要があり[routerLink]ますか？

次のような絶対URLを使用して簡単にアクセスできることを知っています

しかし、ここで相対リンクを使用する必要がある場合はどうすればよいでしょうか? それはどのような形をとらなければなりませんか？私はもう試した

などですが、実際に機能するリンクを作成するものはありません (上記を参照)。

私はルーター 3.0.0-beta2 で RC4 を使用しています。

新しいルーター (バージョン 3.0.0-alpha.7) を試していますが、routerLink ディレクティブでクエリ パラメータを指定する方法を知りたいですか?

以下の Router.navigate() メソッドは、http://localhost:3000/component-a?x=1 のような URL を生成します。

ただし、routerLink ディレクティブで同じことを行う方法がわかりません。以下のようなテンプレートは、パーサー エラーを返します...

そして、取得できる最も近いものはhttp://localhost:3000/component-a;x=1で、子ルートの構文を使用します。

アクティブ化する前にルートを特定しようとしているので、ルートをキャッシュして、ログイン後にユーザーをそのルートにリダイレクトできます。

古いベータ ルーターComponentInstruction.routeNameではアクティブ化フックを呼び出すことができましたが、新しいcanActivate()ガードでは、意図したルートがアクティブ化される前にアクセスする方法がわかりません。

ユーザーがアプリのナビゲーション ボタンをクリックしたときに目的のルートを共有サービスに保存することはできますが、アドレス バーに URL を入力するとどうなるでしょうか?