更改页面时Angular2继承变量的值 [英] Angular2 carry over value of variable when changing pages

问题描述

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

I have a multi-page website (using the router) and would like to carry a variable value over from one page to the other.

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

On my contact form page, I have the following code:

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);
}

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

When I'm on the main page and send a city to the data service, I get the following output in the console:

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

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

I therefore know that information is passed on correctly. However, when I then go to the contact page, testName is changed back to 'hello'.

如何防止这种情况发生?我尝试不初始化testName，但是随后出现错误:分配给未声明的变量字符串.

How do I prevent this from happening? I have tried not initiating testName, but then I get the error: assignment to undeclared variable string.

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

Moving testName:string = "hello"; to ngOnInit also results in the same error.

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

//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();
    }
}

推荐答案

您正在创建一个 Subject :这是一个充当可观察者和观察者的代理.

You're creating a Subject : this is a proxy that serves as an observable and an observer.

创建 [Behavior | Replay] Subject 时，您正在创建热流:任何订阅该流的观察者将收到该流的最后一个值.

When you create a [Behavior|Replay]Subject, you're creating a hot stream : any observer subscribing to it will receive the last value of it.

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

This is different from a cold stream, like HTTP calls, where the whole stream is transmitted : once you have subscribed to it and the observable is finalized, you're not subscribed to it anymore.

用代码词表示，这意味着每次您创建联系人组件的实例，创建新的订阅，并且每次在主题 OR <上调用 next 时，都会运行订阅代码./strong>，当您创建新的订阅时(热流在首次订阅时会获得该流的最新值).

In code words, it means everytime you create an instance of your contact component, you create a new subscription, and the subscription code is ran everytime you call next on your subject OR when you create a new subscription (hot streams get the latest value of the stream at their first subscription).

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

To avoid that, you can either limit your subscription to a single call, or delete your subscrpition at component destruction. I recommend the latter :

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

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

这篇关于更改页面时Angular2继承变量的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！