docs: improve preloading component data chapter (#42340)

This commit updates the `Lazy-loading feature modules` guide (guide/lazy-loading-ngmodules) to fix example code that illustrates the process of preloading component data.

Closes #37113.

PR Close #42340
This commit is contained in:
Andrew Kushnir 2021-05-25 18:25:37 -07:00
parent 7a6358b4a8
commit d74d1306e2
1 changed files with 40 additions and 12 deletions

View File

@ -271,7 +271,7 @@ With the CLI, the command to generate a service is as follows:
ng generate service <service-name> ng generate service <service-name>
</code-example> </code-example>
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:
<code-example header="Resolver service (excerpt)"> <code-example header="Resolver service (excerpt)">
@ -279,8 +279,14 @@ import { Resolve } from '@angular/router';
... ...
export class CrisisDetailResolverService implements Resolve<> { /* An interface that represents your data model */
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> { export interface Crisis {
id: number;
name: string;
}
export class CrisisDetailResolverService implements Resolve<Crisis> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
// your logic goes here // your logic goes here
} }
} }
@ -291,7 +297,7 @@ Import this resolver into your module's routing module.
<code-example header="Feature module's routing module (excerpt)"> <code-example header="Feature module's routing module (excerpt)">
import { YourResolverService } from './your-resolver.service'; import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
</code-example> </code-example>
@ -302,22 +308,44 @@ Add a `resolve` object to the component's `route` configuration.
path: '/your-path', path: '/your-path',
component: YourComponent, component: YourComponent,
resolve: { resolve: {
crisis: YourResolverService crisis: CrisisDetailResolverService
} }
} }
</code-example> </code-example>
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.
<code-example header="Component's constructor (excerpt)">
<code-example header="Component (excerpt)"> import { ActivatedRoute } from '@angular/router';
ngOnInit() {
this.route.data @Component({ ... })
.subscribe((your-parameters) => { class YourComponent {
// your data-specific code goes here constructor(private route: ActivatedRoute) {}
});
} }
</code-example>
Use the injected instance of the `ActivatedRoute` class to access `data` associated with a given route.
<code-example header="Component's ngOnInit lifecycle hook (excerpt)">
import { ActivatedRoute } from '@angular/router';
@Component({ ... })
class YourComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data
.subscribe(data => {
const crisis: Crisis = data.crisis;
// ...
});
}
}
</code-example> </code-example>
For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas). For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).