私のシナリオは次のとおりです。複数のオプションがあるメニューがあります。各メニューは、ユーザーの権限に応じて表示される必要があります (すでに解決済み)。ほとんどのメニュー項目はモジュールとしてカプセル化されており、ほとんどのモジュールは遅延ロードされるため、ユーザーが最初にメニュー項目をクリックすると、その項目がロードされます (ここまではすべて正常に動作します)。ここでの要件は、より良いユーザー エクスペリエンスを提供するために、遅延ロードされたモジュールのロード中にユーザーがメニュー項目をクリックした後にアクティビティ インジケーターを表示する必要があることです。
これまで、Angular Router の canActive、canLoad、canActivateChild インターフェースを使用しようとしましたが、うまくいきませんでした。
何か案は？
ベストアンサー1
次の 2 つのルーター イベントをリッスンできます。
RouteConfigLoadStartRouteConfigLoadEnd
これらは、遅延ロードされたモジュールがロードされるときに起動します。 などの標準ルーター イベントよりもこれらを使用する利点は、NavigationStartルートが変更されるたびに起動されないことです。
ルート AppComponent でそれらをリッスンして、スピナーを表示/非表示にします。
アプリコンポーネント
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';
...
export class AppComponent implements OnInit {
loadingRouteConfig: boolean;
constructor (private router: Router) {}
ngOnInit () {
this.router.events.subscribe(event => {
if (event instanceof RouteConfigLoadStart) {
this.loadingRouteConfig = true;
} else if (event instanceof RouteConfigLoadEnd) {
this.loadingRouteConfig = false;
}
});
}
}
アプリコンポーネント
ここでは単純な文字列ですが、スピナー コンポーネントを使用することもできます。
<router-outlet></router-outlet>
<ng-container *ngIf="loadingRouteConfig">Loading route config...</ng-container>
私はAngular v4.2.3でこのアプローチを使用しています