Angular 5 [hidden] 没有完全发挥作用

Question

我正在根据可观察对象的布尔值测试 display/hide div 的选项。基于此提供的第二个答案，我有以下代码收集文档正文宽度，返回值与 returns 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>

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

我知道 ngIf 是更好的推荐选项，但是 div 中包含在开始时创建的 svg 标签。如果检测到视图中的更改并且 Dom 中的 ngIf.removed 引用被销毁或从未创建，导致错误，基于当前值。

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

感谢所有建议。

Answer 1

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

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

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

Angular 5 [hidden] 没有完全发挥作用

Angular 5 [hidden] not fully working

javascript

dom

rxjs

angular2-changedetection

angular