diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index f85990b22f..0a926ef6c6 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -271,7 +271,7 @@ With the CLI, the command to generate a service is as follows: ng generate service -In your service, import the following router members, implement `Resolve`, and inject the `Router` service: +In the newly-created service, implement the `Resolve` interface provided by the `@angular/router` package: @@ -279,8 +279,14 @@ import { Resolve } from '@angular/router'; ... -export class CrisisDetailResolverService implements Resolve<> { - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> { +/* An interface that represents your data model */ +export interface Crisis { + id: number; + name: string; +} + +export class CrisisDetailResolverService implements Resolve { + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { // your logic goes here } } @@ -291,7 +297,7 @@ Import this resolver into your module's routing module. -import { YourResolverService } from './your-resolver.service'; +import { CrisisDetailResolverService } from './crisis-detail-resolver.service'; @@ -302,22 +308,44 @@ Add a `resolve` object to the component's `route` configuration. path: '/your-path', component: YourComponent, resolve: { - crisis: YourResolverService + crisis: CrisisDetailResolverService } } -In the component, use an `Observable` to get the data from the `ActivatedRoute`. +In the component's constructor, inject an instance of the `ActivatedRoute` class that represents the current route. + - -ngOnInit() { - this.route.data - .subscribe((your-parameters) => { - // your data-specific code goes here - }); +import { ActivatedRoute } from '@angular/router'; + +@Component({ ... }) +class YourComponent { + constructor(private route: ActivatedRoute) {} } + + + +Use the injected instance of the `ActivatedRoute` class to access `data` associated with a given route. + + + +import { ActivatedRoute } from '@angular/router'; + +@Component({ ... }) +class YourComponent { + constructor(private route: ActivatedRoute) {} + + ngOnInit() { + this.route.data + .subscribe(data => { + const crisis: Crisis = data.crisis; + // ... + }); + } +} + For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).