Question

我正在使用angular2构建一个应用程序，我在使用浏览器后退按钮时遇到问题，并使用observable更改检测。

我的组件实现OnActivate，在routerOnActivate中，它使用一个调用我的API的服务来加载要在页面上显示的数据。

所以我的问题出现了，如果我使用浏览器后退按钮返回到另一个页面，路由更改事件正常触发，我的组件被初始化并调用routerOnActivate函数，服务被调用并正确检索数据但我得到了一个空白页面，我的组件输出应该是。

仅在使用浏览器后退按钮时才会发生这种情况。如果我通过RouteConfig中设置的URL直接进入页面，它可以正常工作。如果我单击导航到该路由的链接，它可以正常工作。只有当我使用浏览器上的后退/前进按钮时，我才会看到这个问题。

我知道这与变更检测系统有关，因为如果我将ChangeDetectorRef注入我的组件并订阅服务返回的observable，并在成功处理程序中调用ChangeDetectorRef.detectChanges，那么该页面适用于所有场景，包括使用后退/前进按钮。

任何人遇到这个问题并能为我提供一些见解吗？

我会试着看看我是否可以创建一个能够展示的傻瓜。我想我不需要手动调用变更检测，因此我不确定是否存在某种错误或者我是否做错了。

我的一个组件示例：



    "use strict";

    // import Angular 2
    import {Component, Inject, OnInit, ChangeDetectorRef} from "angular2/core";
    import {RouteParams, Router, Location, CanReuse, ComponentInstruction, OnActivate} from "angular2/router";
    import {SitePage} from "../../core/models/site-page";
    import {EntityRetrievalService} from "../../core/services/entity-retrieval.service";
    import {FindResult, FinderService} from "../../core/services/finder.service";
    import {Loader, LoaderService, LoaderComponent} from "../../components/loader/loader";
    import {NotFound} from "../../components/not-found/not-found";
    import {LinkIcon} from "../../components/link-icon/link-icon";

    @Component({
        selector: "page-site-page",
        templateUrl: "pages/site-page/site-page.template.html",
        directives: [LoaderComponent, NotFound, LinkIcon],
      providers: [LoaderService]
    })
    export class SitePageComponent implements OnActivate {
      public sitePage : SitePage = new SitePage();
        public pageLoader: Loader;

        constructor(
            protected routeParams : RouteParams,
            @Inject("SitePageService") protected sitePageService: EntityRetrievalService,
            protected finderService: FinderService,
            protected loaderService: LoaderService,
            protected router: Router,
        protected location: Location,
            private changeDetector: ChangeDetectorRef) {}

        routerOnActivate() {
            this.loadPage(this.routeParams.get("slug"));
        }

        loadPage(slug:string) {
            this.pageLoader = this.loaderService.create();
            this.finderService.find("site-pages", {
                    slug: slug
                })
                .subscribe(
                    (result:FindResult) => {
                        this.sitePageService.getById(result.id)
                      .subscribe(
                                (res : SitePage) => {
                            this.sitePage = res;
                                    this.pageLoader.success();
                                    this.changeDetector.detectChanges();
                          },
                                (err:any) => {
                                    this.pageLoader.error();
                        }
                            );
                    },
                    (err:any) => {
                        this.pageLoader.error();
                    }
                );
        }
    }

Angular2，浏览器后退按钮，可观察对象和更改检测

0 个答案: