mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Andrew Scott
parent
d7fd99a2b5
commit
94c2cfbe25
@@ -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);
|
||||
* }
|
||||
* });
|
||||
* });
|
||||
* }
|
||||
* }
|
||||
|
||||
Reference in New Issue
Block a user