Angular 5 [隐藏] 未完全正常工作

我正在测试一个基于可观察的布尔值显示/隐藏 div 的选项。基于此提供的第二个答案堆栈问题 https://stackoverflow.com/questions/47034573/ngif-hide-some-content-on-mobile-screen-angular-4，我有以下代码，它收集文档正文宽度，返回值与返回 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>

如果条件为 true (body

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

如果与 ngIf 合并，changeDetection 实现会起作用吗？我想一个重新初始化引用 svg 标签的变量的函数可以工作。

感谢您的所有建议。

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

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

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