Routing 为什么我在angular2的路线图没有';你不能用angular2刷新吗?
当我点击“编辑”按钮时,我的路线图不能正常工作 在第一个视图中,我单击bob行上的编辑btn 这是第二种观点 现在我单击浏览器中的“上一步”按钮,它将返回fist视图。然后我单击弹出行上的编辑btn,这是第三个视图(与第二个视图相同,这是错误的) 我放了一些控制台进行调试。这是控制台日志 这是我的第一个视图代码,当我单击编辑按钮时,它会触发func并在console.log图片中记录1和3条记录Routing 为什么我在angular2的路线图没有';你不能用angular2刷新吗?,routing,angular,Routing,Angular,当我点击“编辑”按钮时,我的路线图不能正常工作 在第一个视图中,我单击bob行上的编辑btn 这是第二种观点 现在我单击浏览器中的“上一步”按钮,它将返回fist视图。然后我单击弹出行上的编辑btn,这是第三个视图(与第二个视图相同,这是错误的) 我放了一些控制台进行调试。这是控制台日志 这是我的第一个视图代码,当我单击编辑按钮时,它会触发func并在console.log图片中记录1和3条记录 import {Component} from 'angular2/core'; import {
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) });
}
}
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 }]) });
}
这是我的第二个视图的代码,在我单击edit按钮并跳转到edit视图后,它触发构造函数并在console.log图片中记录2和4条记录
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) });
}
}
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问题。但我不知道为什么以及如何解决这个问题
这是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(订阅者),而不是传递一个对象,然后传递一个字符串
editSubscriber(subscriber: Subscriber) {
this.router.navigate(['Subscribers.Edit', { id: this.id, subscriberString: JSON.stringify(subscriber) }])//here
}
现在,在第二个组件中,您获得字符串并执行JSON.parse()
始终记住,您的routeparams只能是字符串数布尔类型(基本类型?这两种情况下显示的URL是什么?我不认为这一个是
routeparams的问题,确切地说,这是您的代码的问题。请你提供任何plnkr为同样的可能会帮助你。大家好:我编辑我的代码和网址