Question

从模型类开始，在某个随机时间点，我需要将2个参数传递给组件来更新html。组件函数将使用此参数在视图中进行一些UI修改。

例如：

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

在组件内部，我有不同的功能：

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

这两个参数（val1和val2）应该用于更新组件成员变量（showitem），后者又会更新html。

任何人都可以指导我如何在模型类中的任何随机时间点更新组件吗？

Answer 1

在您的服务中使用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。

Demo

希望这有帮助

Answer 2

这是为Rxjs创建的情况。您可以从任何地方订阅主题，并在主题的值更改时获取新数据。然后，更新组件（模板）中的变量，并触发Angular的ChangeDetection。

我创建了一个例子： https://stackblitz.com/edit/async-communication-model-template

不要忘记取消订阅组件的破坏，否则可能会出现性能瓶颈或意外行为。

Angular/RxJs When should I unsubscribe from `Subscription`

如何在模型类中的任何随机时间点更新组件？

2 个答案:

Demo