Javascript 角度5[隐藏]未完全工作

我正在测试一个基于可观察对象的布尔值显示/隐藏div的选项。根据本文提供的第二个答案，我有以下代码，用于收集文档正文宽度，返回值与返回true:false值的函数一起使用

const checkScreenSize = () => document.body.clientWidth < 960;
const source$ = 
fromEvent(window,'resize').pipe(throttleTime(500));

const screenSizeChanged$ = source$.pipe(map(checkScreenSize));

this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()));

constcheckscreensize=（）=>document.body.clientWidth<960；
常量源$=
fromEvent（窗口，'resize'）.pipe（节流时间（500））；
const screenSizeChanged$=源$.pipe（映射（检查屏幕大小））；
this.isScreenSmall$=screenSizeChanged$.pipe（startWith（checkScreenSize（））；

以及模板：

<div "horizontal" [hidden]="isScreenSmall$ | async">
 <glove-stepper-horizontal ></glove-stepper-horizontal>
   {{isScreenSmall$ | async}}
</div>
<div id="vertical" [hidden]="!isScreenSmall$ | async">
 <glove-stepper-vertical></glove-stepper-vertical>
 {{isScreenSmall$ | async}}
</div>

{{isScreenSmall$| async}
{{isScreenSmall$| async}

如果条件为true（body 我知道ngIf的更好的和推荐的选项，但是在div中包括在开始时创建的svg标记。如果检测到视图中的更改并从Dom中删除ngIf.xml，则根据当前值，将销毁或从不创建引用，从而导致错误

如果与ngIf合并，changeDetection实施是否可行。我认为一个函数可以重新初始化引用svg标记的变量

---

谢谢您的建议。

您的第二个条件不会以这种方式工作，因为

！isScreenSmall$

将解析为值为

false

的布尔值，只要

isScreenSmall$

是可观察的

必须将可观察值与异步管道操作放在括号中，以使其正常工作：

<div id="vertical" [hidden]="!(isScreenSmall$ | async)">
  <glove-stepper-vertical></glove-stepper-vertical>
  {{isScreenSmall$ | async}}
 </div>

{{isScreenSmall$| async}

试着把你的条件放在括号里！（isScreenSmall$|异步）