docs(router): Adjust example for scrollPositionRestoration (#46201)

This makes a small update to the example so that it shows a use-case
that's not already covered by the 'enabled' option. The existing example
would get identical behavior to `scrollPositionRestoration: 'enabled'`
with `anchorScrolling: 'enabled'`.

The updated example shows a use-case for when custom scrolling _would_
be needed. For example, when data is fetched because it is not available
immediately or through a resolver. This is one of the cases described in #24547

This update is sufficient to address all of the documentation problems
noted in the aforementioned issue. Another fix should be made to address
the problem that scroll restoration needs to be delayed until after CD
has run so the update block of the activated component's template is
run.

PR Close #46201
This commit is contained in:
Andrew Scott
2022-05-31 14:30:09 -07:00
committed by Andrew Scott
parent d7fd99a2b5
commit 94c2cfbe25
+15 -14
View File
@@ -313,21 +313,22 @@ export interface ExtraOptions {
* in the following example.
*
* ```typescript
* class AppModule {
* constructor(router: Router, viewportScroller: ViewportScroller) {
* router.events.pipe(
* filter((e: Event): e is Scroll => e instanceof Scroll)
* class AppComponent {
* movieData: any;
*
* constructor(private router: Router, private viewportScroller: ViewportScroller,
* changeDetectorRef: ChangeDetectorRef) {
* router.events.pipe(filter((event: Event): event is Scroll => event instanceof Scroll)
* ).subscribe(e => {
* if (e.position) {
* // backward navigation
* viewportScroller.scrollToPosition(e.position);
* } else if (e.anchor) {
* // anchor navigation
* viewportScroller.scrollToAnchor(e.anchor);
* } else {
* // forward navigation
* viewportScroller.scrollToPosition([0, 0]);
* }
* fetch('http://example.com/movies.json').then(response => {
* this.movieData = response.json();
* // update the template with the data before restoring scroll
* changeDetectorRef.detectChanges();
*
* if (e.position) {
* viewportScroller.scrollToPosition(e.position);
* }
* });
* });
* }
* }