Angular,订阅数组无效
Angular, subscribe on an array is not working
我正在做 alert.service。我的服务包含一个名为 Alert 的模型数组。
这是alert.service
@Injectable()
export class AlertService {
private queue: Alert[] = new Array<Alert>();
constructor() { }
getInstance() : Observable<Alert[]> {
return of(this.queue);
}
push(type: string, title: string, message: string) {
let alert = new Alert(type, title, message);
this.queue.push(alert);
window.setTimeout(_ => {
this.pop();
},3000);
}
pop() {
this.queue.pop();
}
}
在我的 alert.component 中,我调用此服务并订阅队列的一个可观察对象:
export class AlertComponent implements OnInit {
public alert: string = `
<div class="alert [type]">
<span>[title]</span>
<p>[message]</p>
</div>`;
constructor(private alertService: AlertService) { }
ngOnInit() {
this.alertService.getInstance().subscribe(val => {
console.log(val);
});
}
success() {
this.alertService.push('error', 'ninja', 'hahahahahahah hahhahaha hahah hah');
}
}
在我的模板中,我点击了一个触发方法 success()
(被调用)的按钮。
但是console.log(val) returns只有一次值。这是实例化我的队列服务数组时的值。
我做错了什么?
感谢您的帮助!
最后,
我设法在我的阵列上使用 BehaviorSubject。
@Injectable()
export class AlertService {
private queue: Alert[] = new Array<Alert>();
private behaviorSubjectQueue: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>(this.queue);
constructor() {
}
getInstance() {
return this.behaviorSubjectQueue;
}
push(type: string, title: string, message: string) {
let alert = new Alert(type, title, message);
this.queue.push(alert);
this.behaviorSubjectQueue.next(this.queue);
window.setTimeout(_ => {
this.pop();
},3000);
}
pop() {
this.queue.pop();
this.behaviorSubjectQueue.next(this.queue);
}
}
组件保持不变,但在每次推送和弹出操作时都会收到通知。
谢谢大家的帮助!
我正在做 alert.service。我的服务包含一个名为 Alert 的模型数组。
这是alert.service
@Injectable()
export class AlertService {
private queue: Alert[] = new Array<Alert>();
constructor() { }
getInstance() : Observable<Alert[]> {
return of(this.queue);
}
push(type: string, title: string, message: string) {
let alert = new Alert(type, title, message);
this.queue.push(alert);
window.setTimeout(_ => {
this.pop();
},3000);
}
pop() {
this.queue.pop();
}
}
在我的 alert.component 中,我调用此服务并订阅队列的一个可观察对象:
export class AlertComponent implements OnInit {
public alert: string = `
<div class="alert [type]">
<span>[title]</span>
<p>[message]</p>
</div>`;
constructor(private alertService: AlertService) { }
ngOnInit() {
this.alertService.getInstance().subscribe(val => {
console.log(val);
});
}
success() {
this.alertService.push('error', 'ninja', 'hahahahahahah hahhahaha hahah hah');
}
}
在我的模板中,我点击了一个触发方法 success()
(被调用)的按钮。
但是console.log(val) returns只有一次值。这是实例化我的队列服务数组时的值。
我做错了什么?
感谢您的帮助!
最后,
我设法在我的阵列上使用 BehaviorSubject。
@Injectable()
export class AlertService {
private queue: Alert[] = new Array<Alert>();
private behaviorSubjectQueue: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>(this.queue);
constructor() {
}
getInstance() {
return this.behaviorSubjectQueue;
}
push(type: string, title: string, message: string) {
let alert = new Alert(type, title, message);
this.queue.push(alert);
this.behaviorSubjectQueue.next(this.queue);
window.setTimeout(_ => {
this.pop();
},3000);
}
pop() {
this.queue.pop();
this.behaviorSubjectQueue.next(this.queue);
}
}
组件保持不变,但在每次推送和弹出操作时都会收到通知。
谢谢大家的帮助!