Angular 2 服务 - 订阅不保存数据？

Question

我正在编写一个 Angular 2 应用程序，其中包含代表页面的组件。当我导航到新的 component/page 时，我还想跟踪我之前所在的 component/page。我正在通过一项服务实现这一目标。

当我在组件构造函数中订阅该服务时，我的数据似乎已正确保存到属性。但是，如果我稍后尝试访问此属性，它会说它未定义。这是为什么？

缩小示例：我的两个页面是第一页和第二页。第一页有一个按钮可以转到第二页；第二页有一个源页面属性，它应该存储 "page-one" 作为值。

源代码：history.service.ts

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HistoryService {

  priorPage = new EventEmitter<string>();

  constructor() { }
}

源代码：页面-one.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HistoryService } from '../services/history/history.service';

@Component({
  selector: 'app-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.css']
})
export class PageOneComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute, private historyService: HistoryService) {
  }

  ngOnInit() {
  }

  loadPageTwo() {
    this.historyService.priorPage.emit("page-one");
    this.router.navigate(['/pagetwo']);
  }
}

源代码：页面-one.component.html

<p>
  Welcome to Page1!
</p>
<button (click)="loadPageTwo()">Go To Page Two</button>

源代码：页面-two.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HistoryService } from '../services/history/history.service';

@Component({
  selector: 'app-page-two',
  templateUrl: './page-two.component.html',
  styleUrls: ['./page-two.component.css']
})
export class PageTwoComponent implements OnInit {
  sourcePage: string;

  constructor(private router: Router, private route: ActivatedRoute, private historyService: HistoryService) {
    this.historyService.priorPage.subscribe(
      (priorPage: string) => {
        this.sourcePage = priorPage;
        console.log('priorPage = ' + priorPage);
        console.log('sourcePage = ' + this.sourcePage);
      }
    );
   }

  ngOnInit() {

  }

  loadPageOne() {
    this.router.navigate(['/pageone']);
  }

  logSource() {
    console.log('logSource: sourcePage = ' + this.sourcePage);
  }

}

源代码：页面-two.component.html

<p>
  Welcome to Page2!
</p>
<p>You came from {{source}}</p>
<button (click)="loadPageOne()">Go To Page One</button>
<button (click)="logSource()">Log Source</button>

当我从第一页导航到第二页然后点击 "Log Source" 按钮时的输出是：

priorPage = page-one
sourcePage = page-one
logSource: sourcePage = undefined

我如何更新它以便 sourcePage 属性保留值？

Answer 1

您首先发出值，然后导航到该页面。因此，组件是在已经发出值之后创建的。检查您的 console.log 语句是否正在执行。

为什么不保留 HistoryService 中的 priorPage？

历史服务：

export class HistoryService {

  priorPage: string;

  constructor() { }

}

第一页组件

export class PageOneComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute, private historyService: HistoryService) {
  }

  ngOnInit() {
  }

  loadPageTwo() {
    this.historyService.priorPage = "page-one";
    this.router.navigate(['/pagetwo']);
  }
}

页面二组件

export class PageTwoComponent implements OnInit {
  sourcePage: string;

  constructor(private router: Router, private route: ActivatedRoute, private historyService: HistoryService) {
        this.sourcePage = this.historyService.priorPage;

   }

Angular 2 服务 - 订阅不保存数据？

Angular 2 Service - Subscribing Does Not Save Data?

angular

angular2-routing