Question

我有一个多页的网站（使用路由器），并且希望将一个可变的值从一页转移到另一页。

在我的联系表单页面上，我有以下代码：

testName:string = "hello";

ngOnInit()
{       
    this.dataService.Stream
        .subscribe(
            (city:City) => this.processData(city),
            (err) => console.log('Error at processing data'),
            () => console.log('Complete...')
        )
}

processData(city:City)
{
    console.log('the city name is: ', this.testName);
    this.problematicCity = city;
    this.testName = city.name;
    console.log('received data for city: ', this.testName);
}

当我进入主页并将城市发送到数据服务时，会在控制台中获得以下输出：

the city name is: hello
received data for city: Luxemburg

因此，我知道信息传递正确。但是，当我随后进入联系页面时，testName会变回'hello'。

如何防止这种情况发生？我尝试不启动testName，但是随后出现错误：assignment to undeclared variable string。

将testName:string = "hello";移至ngOnInit也会导致相同的错误。

添加：这是我的数据服务：

//data.service.ts
import {Subject} from 'rxjs/Subject';
import {Injectable} from 'angular2/core';
import {City} from '../model/city.model';

@Injectable()

export class DataService
{
    Stream:Subject<City>;

    constructor()
    {
        this.Stream = new Subject();
    }
}

Answer 1

您正在创建Subject：这是一个代理，可作为可观察者和观察者。

创建[Behavior|Replay]Subject时，就是在创建热门流：任何订阅它的观察者都将收到它的最后一个值。

这不同于冷流，例如HTTP调用，整个流都被传输：一旦您订阅了它，并且可观察对象完成了，就不再订阅它了。

用代码词表示，这意味着每次您创建联系人组件的实例，创建新的订阅，并且每次对主题 OR 调用next时，都会运行订阅代码当您创建新的订阅时（热流在其第一次订阅时获得该流的最新值）。

为避免这种情况，您可以将订阅限制为单个调用，也可以在销毁组件时删除订阅。我推荐后者：

ngOnInit() {
  this.streamSubscription = this.dataService.Stream.subscribe(...);
}

ngOnDestroy() {
  this.streamSubscription.unsubscribe();
}

更改页面时Angular2继承变量的值

1 个答案: