6

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

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 が返されます。
4

3 に答える 3

1

以下のように app.routes.ts ファイルを更新し、 HashLocationStrategyを参照用に使用します。

import {Routes, RouterModule} from '@angular/router';
import ProjectListComponent from './projects-list.component';
import TestsListComponent from './tests-list.component';
import OverviewComponent from './overview.component';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';


export const routes: Routes = [
    { path: '', redirectTo: 'projects', pathMatch: 'full' },
    {
        path: 'projects', component: ProjectListComponent,
        children: [
            { path: ':id', redirectTo: ':id', pathMatch: 'full' },
            {
                path: ':id', component: OverviewComponent,
                children: [
                    { path: '', redirectTo: 'tests', pathMatch: 'full' },
                    { path: 'tests', component: TestsListComponent },

                ]
        ]
    }
];

export const appRoutingProviders: any[] = [
    {
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }
];

export const routing = RouterModule.forRoot(routes);
于 2017-01-10T10:21:31.837 に答える
0

サブスクライブできるグローバル パラメータの変更はありません。

1 つの方法は、ルート ルーターから始まるルートとそのパラメーターを見つけることです。

console.log('router', this.router.routerState.root.firstChild.firstChild && this.router.routerState.root.firstChild.firstChild.snapshot.params);

これは、またはhttps://angular.io/docs/ts/latest/guide/router.html#!#guardsthis.router.events.subscribe((val) => {のようなルーター ガード内または内で実行できます。canActivateresolve

于 2017-01-06T08:35:45.727 に答える