Javascript 检查组件中的浏览器宽度，存储在变量中，然后在角度中的模板中使用

我试图根据来自组件的deviceWidth属性来判断是否应该打开sidenav。由于某种原因，它不起作用

以下是html:

<md-sidenav #sidenav mode="side" opened="deviceWidth > 960">

export class AppComponent {
  deviceWidth: any;
  ngOnInit() {
    this.deviceWidth = window.innerWidth;
  }
}

错误的方式（不完全错误但不恰当）

正确的方式,

[opened]="(deviceWidth>960)"

可能还需要（稍后）显示

窗口的
调整大小
功能

@HostListener('window:resize', ['$event'])
  onResize(event: any) {
    console.log(event.target.innerWidth);
    this.deviceWidth = event.target.innerWidth;
  }

如果在
md sidenav
组件中将
opened
声明为
@Input
，则语法错误。一定是这样

<md-sidenav #sidenav mode="side" [opened]="deviceWidth > 960">



查看这些链接以了解更多详细信息


[opened]=“deviceWidth>960”
@adam beck我还注意到opened=“{{{deviceWidth>960}}有效这有意义吗？如果有效，我想是有效的。但我不喜欢参数中的插值。我建议使用
[]
binding语法。按照@adam beck的建议，这将是属性绑定的正确用法。谢谢你的回答。你能解释一下HostListender可以提供什么帮助吗。你是在告诉我把它放在我的组件中吗？另外，我没有访问opened指令的权限，如果你告诉我的话，它内置在Angle Material组件中将HostListener添加到指令中。但如果可以将其添加到组件中，请详细说明。
<md-sidenav #sidenav mode="side" [opened]="deviceWidth > 960">