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:
parent
7a6358b4a8
commit
d74d1306e2
|
@ -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)">
|
||||||
|
|
||||||
|
import { ActivatedRoute } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({ ... })
|
||||||
|
class YourComponent {
|
||||||
|
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) {}
|
||||||
|
|
||||||
<code-example header="Component (excerpt)">
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.route.data
|
this.route.data
|
||||||
.subscribe((your-parameters) => {
|
.subscribe(data => {
|
||||||
// your data-specific code goes here
|
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).
|
||||||
|
|
Loading…
Reference in New Issue