为什么我的RouteParams in angular2没有在angular2中刷新？

Question

当我单击“编辑”按钮时，我的RouteParams没有很好地工作。

​

​

在第一个视图中，我单击bob行上的编辑btn，这是第二个视图。

​

现在，我单击浏览器中的“后退”按钮，它将返回到第一个视图。然后单击pop行上的编辑btn，这是第三个视图(与第二个视图相同，这是错误的)。

​

我放了一些控制台来调试。这是控制台日志

​

这是我的第一个视图的代码，当我单击“编辑”按钮时，它会触发函数并在console.log图片中记录1和3记录

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import { Router, RouteParams, ROUTER_DIRECTIVES } from 'angular2/router';
import {MailingListService} from'../../services/mailing-list/mailing-lists.service'
import {Subscriber} from '../../models/subscriber/subscriber';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
selector: 'subscriber-list-edit-view',
templateUrl: './app/components/subscriber-list-editor-view/subscriber-list-editor-view.html',
directives: [ROUTER_DIRECTIVES]
})

export class EditSubscriberListViewComponent {

subscribers: Subscriber[];
id: string;
constructor(private mailingListsService: MailingListService, params: RouteParams, private router: Router) {

    this.init(this.id = params.get("id"));
}


init(id: string) {
    this.mailingListsService.getSubscribers(this.id).subscribe(x => {
        this.subscribers = x;
    });
}
//this is fired when click the edit button
editSubscriber(subscriber: Subscriber) {

    this.router.navigate(['Subscribers.Edit', { id: this.id, subscriber: subscriber }]);
    console.log(subscriber);//this print the first and third record in console.log
}



deleteSubscriber(subscriber: Subscriber) {

    this.mailingListsService.deleteSubscriber(this.id, subscriber)
        .subscribe(() => { this.init(this.id) });

}


}

以下是我的第二个视图的代码，在我单击“编辑”按钮并跳转到编辑视图后，它将触发构造函数并在console.log图片中记录2和4条记录。

import {Component} from 'angular2/core';
import { Router, RouteParams } from 'angular2/router';
import {CORE_DIRECTIVES} from 'angular2/common';  
import {Subscriber}from '../../models/subscriber/subscriber';
import {MailingListService} from'../../services/mailing-list/mailing-lists.service'

@Component({
selector: 'create-subscriber-view',
templateUrl: './app/components/subscriber-creator-view/subscriber-creator-view.html'
})

export class CreateSubscriberComponent {
subscriber: Subscriber;
id: string;
subscriberId: string;  
name: string;
phoneNumber: string;
email: string;
isActivated: boolean;
isBusy: boolean;
isEdit: boolean;
constructor(private mailingListService: MailingListService,private params: RouteParams, private router: Router) {
    this.id = params.get("id");
    this.subscriber = params.get("subscriber");

    console.log(params.get("subscriber")); //this doesn't work well,print the second and forth record in the console.log

    if (this.subscriber != null) { this.isEdit = true; this.name = this.subscriber.name; this.phoneNumber = this.subscriber.phoneNumber; this.email = this.subscriber.email; this.subscriberId = this.subscriber.id; this.isActivated = this.subscriber.isActivated;};          

}

create() {
    if (this.phoneNumber == null && this.email == null) { alert("either phone or email is required ! "); return; }
    this.isBusy = true;
    this.mailingListService.createSubscriber(this.id, {
        name: this.name,
        phoneNumber: this.phoneNumber,
        email: this.email
    })     
        .subscribe(() => { this.router.navigate(['MailingLists.View', { id: this.id }]) });  
}  

edit() {
    if (this.phoneNumber == null && this.email == null) { alert("either phone or email is required ! "); return; }
    this.isBusy = true;
    this.mailingListService.editSubscriber(this.id, {
        name: this.name,
        phoneNumber: this.phoneNumber,
        email: this.email
    })
        .subscribe(() => { this.router.navigate(['MailingLists.View', { id: this.id }]) });  
}

}

正如您所看到的，console.log中的第四条记录是不正确的，所以我假设这是params问题。但我不知道为什么和如何解决这个问题。

这是路特康图

 { path: '/MailingLists/:id/Subscribers/Create', component: CreateSubscriberComponent, as: 'Subscribers.Create' },
{ path: '/MailingLists/:id/Subscribers/Edit', component: CreateSubscriberComponent, as: 'Subscribers.Edit' },

创建和编辑使用相同的组件，但使用不同的url。

Answer 1

因为在此之前，我将订阅服务器作为对象传递，路由参数通过引用查找对象。这也许是它没有刷新数据的原因。

我有个解决办法。只需做一个JSON.stringify(订阅者)，而不是传递一个对象，你传递一个字符串。

editSubscriber(subscriber: Subscriber) {
    this.router.navigate(['Subscribers.Edit', { id: this.id, subscriberString: JSON.stringify(subscriber) }])//here

}

现在，在第二个组件中，得到字符串并执行JSON.parse()

 constructor(private mailingListService: MailingListService, private params: RouteParams, private router: Router) {
    this.id = params.get("id");
    this.subscriberString = params.get("subscriberString");            
    if (this.subscriberString != null) {
        this.isEdit = true;
        this.subscriber = JSON.parse(this.subscriberString);//Here
        this.name = this.subscriber.name;
        this.phoneNumber = this.subscriber.phoneNumber;
        this.email = this.subscriber.email;
        this.subscriberId = this.subscriber.id;
        this.isActivated = this.subscriber.isActivated;
    };          

}

请始终记住，您的路由参数只能是字符串数的类型布尔(原语类型？)