[英]why my RouteParams in angular2 didn't refresh in angular2?
當我單擊“編輯”按鈕時,我的RouteParams不能正常工作。
現在,我在瀏覽器中單擊“后退”按鈕,它返回到拳頭視圖。 然后我單擊彈出行上的編輯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中的第四條記錄不正確,因此我認為這是參數問題。 但是我不知道為什么以及如何解決這個問題。
這是routeconfig
{ path: '/MailingLists/:id/Subscribers/Create', component: CreateSubscriberComponent, as: 'Subscribers.Create' },
{ path: '/MailingLists/:id/Subscribers/Edit', component: CreateSubscriberComponent, as: 'Subscribers.Edit' },
創建和編輯使用相同的組件,但使用不同的URL。
因為以前我將訂戶作為對象傳遞,而routeparams通過引用找到了對象。 那也許就是為什么它沒有刷新數據的原因。
我在這里有一個可行的解決方案。 只需執行JSON.stringify(subscriber)即可,而不是傳遞對象,而傳遞字符串。
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;
};
}
永遠記住,您的routeparams只能是字符串類型boolean的類型(原始類型?)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.