Обновление списка пользователей при создании пользователя в угловых 2

Question

Я пишу пример приложения, и у меня есть компонент списка пользователей:

 
@Component({ 
    selector: 'user-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
}) 
export class ListComponent implements OnInit { 
    users: Array = []; 
    private usersService: UsersService; 

    constructor(private service: UsersService) { 
    this.usersService = service; 
    } 

    loadUsers() { 
    this.usersService.getUsers().subscribe(users => this.users = users); 
    } 

    ngOnInit() { 
    this.loadUsers(); 
    this.usersService.userEvent.subscribe(user => this.loadUsers()); 
    } 
} 

И обслуживание:

 
@Injectable() 
export class UsersService { 
    userEvent: EventEmitter = new EventEmitter(); 


    constructor(private http: Http) { 
    } 
    getUsers(): Observable { 
    return this.http.get('/rest/users') 
     .map(res => res.json()); 
    } 

    create(user: User) { 
    this.http.post("/rest/users", user).subscribe(resp => this.userEvent.emit(user)); 
    } 
} 

export class User { 
    constructor(public username: string, 
    public email: string, public password: string 
) { } 
} 

И есть компонент родственный для создания пользователя:

 
@Component({ 
    selector: 'app-form', 
    templateUrl: './form.component.html', 
    styleUrls: ['./form.component.css'] 
}) 
export class FormComponent implements OnInit { 
    private usersService: UsersService; 
    constructor(private service: UsersService, private router: Router) { 
    this.usersService = service; 
    } 

    ngOnInit() { 
    } 

    onSubmit(formValue: any) { 
    let user = new User(formValue.username, formValue.email, formValue.password); 
    this.usersService.create(user); 
    this.router.navigate(['users']); 
    } 

} 

Это в настоящее время делает то, что я хочу сделать, но мне интересно, если есть более Ele gant способ обновить список пользователей в случае создания нового пользователя на сервере компонентом-братом. Кажется странным, что нужно сигнализировать с помощью излучателя событий, если я подписываюсь на список пользователей, хотя я также не знаю, как http.get может быть уведомлен о создании нового пользователя на сервере.

Answer 1

Вы можете использовать BehaviorSubject, чтобы извещать о любом компоненте который подписывает его. Это особый тип наблюдаемых. Например, в вашей службе пользователя, определить пользователя (вы можете легко изменить это в списке пользователей):

import {Observable, BehaviorSubject} from 'rxjs/Rx'; // 
import {User} from "../../models/user";    // Your model 

... inside your class: 

private _currentUser = new BehaviorSubject<User>(new User); 
getUser = this._currentUser.asObservable(); 
setUser(user: User) { this._currentUser.next(user) } 

В компоненте, вы можете подписаться на getUser предмет, как это:

this.userService.getUser.subscribe(
user => { 
    this.user = user; 
}); 

Таким образом, , несколько компонентов могут подписаться на этот BehaviorSubject, и любой триггер в любом компоненте/услуге, который использует метод setUser, может немедленно изменить эти подписанные компоненты.

... you successfully added a user in your 
... component, now use the trigger: 

this.userService.setUser(this.user);