在Angular中,可以使用Subject
来实现将一个用户对象数组推送到一个主题中。下面是一个示例代码:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private userSubject = new Subject();
userSubject$ = this.userSubject.asObservable();
constructor() { }
addUser(user: User) {
// 添加用户到数组中
const users = this.getUsers();
users.push(user);
// 发送更新后的用户数组到主题中
this.userSubject.next(users);
}
getUsers(): User[] {
// 从某个数据源获取用户数组
// 这里简单返回一个空数组作为示例
return [];
}
}
userSubject$
来获取最新的用户数组:import { Component, OnInit } from '@angular/core';
import { UserService } from 'path-to-user.service';
@Component({
selector: 'app-user-list',
template: `
- {{ user.name }}
`
})
export class UserListComponent implements OnInit {
users: User[];
constructor(private userService: UserService) { }
ngOnInit() {
this.userService.userSubject$.subscribe(users => {
this.users = users;
});
}
}
addUser()
方法来添加用户:import { Component } from '@angular/core';
import { UserService } from 'path-to-user.service';
@Component({
selector: 'app-add-user',
template: `
`
})
export class AddUserComponent {
username: string;
constructor(private userService: UserService) { }
addUser() {
const user: User = {
name: this.username
};
this.userService.addUser(user);
this.username = ''; // 清空输入框
}
}
这样,当在AddUserComponent
中添加用户时,UserListComponent
会立即获取到最新的用户数组并更新视图。