javascript - Angular 5 [隐藏] 没有完全工作

Question

我正在测试基于可观察对象的 bool 值显示/隐藏 div 的选项。基于此 stack question 提供的第二个答案，我有以下代码收集文档正文宽度，并将返回值与返回 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()));

和模板:

<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>

如果条件为真(body < 值)并且垂直 div 是所有呈现的内容，则渲染有效，但是当条件为假时，两个 div 都会显示。

我知道更好和推荐的 ngIf 选项，但是包含在 div 中的是在开始时创建的 svg 标签。如果检测到 View 中的更改并且 ngIf.removed 从 Dom 中删除，则根据当前值，引用将被销毁或永远不会创建，从而导致错误。

如果与 ngIf 合并，changeDetection 实现是否有效。我想一个函数可以重新初始化引用 svg 标签的变量。

感谢所有建议。

Answer 1

你的第二个条件不会那样工作，因为只要 isScreenSmall$，!isScreenSmall$ 就会被解析为值为 false 的 bool 值 是可观察的。

您必须将可观察值与异步管道操作放在括号中才能使其正常工作:

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