javascript - 从 BehaviourSubject 检索到的 ngIf 和 Observable 之间是否存在冲突?
问题描述
我面临一个非常奇怪的问题。我在 *ngIf 中使用 Observable 来显示错误以及异步管道。
问题是当 Observable 的值更新时 DOM 没有更新。它仅在我单击页面或使用键盘获得焦点时更新。
那么,我应该如何将 Observable 与 DOM 绑定呢?
我尝试了各种使用 *ngIf 绑定 DOM 的解决方案,*ngIf 中的 If else,使用和不使用异步管道等。
这是我在 HTML 中使用的方法。
<div style="font-size: 0.9rem;" *ngIf="messageInfo | async"
[ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
'alert-danger': message.type === 'error' }">{{message.text}}
<span (click)="close()" style="cursor: pointer; float: right;">
<i class="material-icons icon-20 vertical-bottom">close</i>
</span>
</div>
组件代码
export class AlertComponent implements OnInit {
message: any;
messageInfo: Observable<any>;
constructor(private alertService: AlertService) {
}
ngOnInit() {
this.messageInfo = this.alertService.getMessage();
this.messageInfo.subscribe(message => {
this.message = message;
});
}
close() {
this.alertService.close();
this.message = undefined;
}
}
服务
export class AlertService {
private subject = new BehaviorSubject<any>(null);
private keepAfterNavigationChange = false;
constructor(private router: Router) {
// clear alert message on route change
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
if (this.keepAfterNavigationChange) {
// only keep for a single location change
this.keepAfterNavigationChange = false;
} else {
// clear alert
this.subject.next(null);
}
}
});
}
success(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({type: 'success', text: message});
// to hide message after 3 seconds.
setTimeout(() => {
this.close();
}, 3000);
}
error(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({type: 'error', text: message});
// to hide message after 3 seconds.
setTimeout(() => {
this.close();
}, 3000);
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
close() {
this.subject.next(null);
}
}
我以这种方式在所有其他组件中使用它:
<alert></alert>
我希望根据 Observable 的值更新 UI,而无需单击或关注页面。不幸的是,只有当我使用鼠标或键盘关注页面时它才会更新。
解决方案
你可以尝试以下 -
从组件中删除message
变量并删除this.messageInfo.subscribe
行并像这样更新您的模板。
<div style="font-size: 0.9rem;" *ngIf="(messageInfo | async) as message"
[ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
'alert-danger': message.type === 'error' }">{{message.text}}
<span (click)="close()" style="cursor: pointer; float: right;">
<i class="material-icons icon-20 vertical-bottom">close</i>
</span>
</div>
推荐阅读
- python - 响应 [403] 添加用户代理和其他标头后 Python 请求出错,Cloudfare 阻止访问
- altair - 条件可以同时基于选择和谓词吗?
- pine-script - PinScript 代码帮助。变量定义问题
- python - 如何从 Raspberry Pi 上的串行输入中解析特定数据?
- php - php 缓存 laravel(文件和内存)性能
- css - 如何将此径向渐变背景更改为透明?
- f# - F# Fable Fetch 正确地将 Promise 解包到另一个 Promise 类型
- android - 没有权限
- php - 使用 Foreach 在数组中回显数组
- powershell - 如何在保留当前工作目录的同时提升 Powershell 并维护传递给脚本的所有参数?