从DOM到组件变量的单向绑定

Question

Angular提供了几种将变量绑定到DOM属性的方法。您可以使用{{}}语法，[property]=expression或双向ngModel绑定。

我还没有找到相反的方法：将DOM绑定到组件变量。例如：如何将元素宽度绑定到width文件中声明的component.ts属性。从DOM到我知道的组件的唯一数据流是事件。

Answer 1

您可以使用@ViewChild装饰器访问您选择的原生DOM元素。在那里，您可以找到width等属性，您可以阅读它们，也可以更新它们。对于更新，建议使用Renderer2服务（主要区别在于我支持服务器端渲染）。

export class MyComponent { 

      @ViewChild('myReference') el: ElementRef;

      doSomething() {
          console.log(el.nativeElement.width); // 350
      }

}

<div #myReference style="width: 350px"></div>

更多相关信息：

https://alligator.io/angular/viewchild-access-component/

Answer 2

使用Style Binding绑定身高，宽度等