Как можно обновить компонент в любой случайный момент времени из класса модели?

Question

Из класса модели в какой-то случайный момент времени мне нужно передать 2 аргумента компоненту, чтобы обновить HTML.Этот аргумент будет использоваться функцией компонента для внесения некоторых изменений пользовательского интерфейса в представление.

Например:

this.notifyservice.SetTitleMessage(val1: string, val2: string);

Внутри компонента у меня есть другая функция:

public DisplayTitleMessage(val1: string, val2: string){
this.showitem = (val1 == "item1") ? true: false;
}

Эти 2 параметра (val1 и val2) должны использоваться для обновленияпеременные-члены компонента (showitem), которые в свою очередь обновляют HTML.

Кто-нибудь может подсказать мне, как компонент может обновляться в любой случайный момент времени из класса модели?

Answer 1

Это тот случай, для которого создан Rxjs .Вы можете подписаться из любой точки на тему и получать свежие данные только тогда, когда значение темы изменяется.Затем вы обновляете переменную в компоненте (шаблоне) и запускается ChangeDetection от Angular.

Я создал пример: https://stackblitz.com/edit/async-communication-model-template

Не забудьте отписаться об уничтожении компонента, иначе может появитьсяузкие места в работе или неожиданное поведение.

Angular / RxJs Когда мне следует отписаться от `Subscription`

Answer 2

Используйте BehaviorSubject в своем сервисе и подпишитесь на него в своем компоненте

notify.service.ts

@Injectable()
export class NotifyService {
    public values: BehaviorSubject<any> = new BehaviorSubject(null);

    public SetTitleMessage(val1: string, val2: string) {
        this.values.next({val1: val1, val2: val2});
    }
}

В OnInit вашего компонента

ngOnInit() {
    this.notifyService.values.subscribe((values: any) => {
        if (values)
            this.DisplayTitleMessage(values.val1, values.val2);
    });
}

Теперь, когда происходит изменение, будет вызываться DisplayTitleMessage.

Демо

Надеюсь, это поможет