angular - 如何让我的组件在 Angular 2 中检测它们自己的高度和宽度？

Question

我决定深入研究在 Angular 中使用 CSS 网格，我正在做的一件事是一个功能，该功能将允许组件根据自己的测量结果动态生成与黄金比例成比例的网格。我用过 @ViewChild结合添加 #someName到我想调用的元素，所以我认为相同的主体将适用于定位父容器或其自身。我遇到过 ElementRef和 TemplateRef但那些似乎只针对组件的 child 。

在很多情况下，我可以通过使用 @ViewChild 来很好地实现这一点。在父组件中，并通过 @Input 将大小发送到子组件中.我唯一会因为这个想法而崩溃的是在 <router-outlet> 中加载组件的实例。 .有没有一种方法可以用于执行此操作？

Answer 1

原答案

事实上，如果你想让一个组件或指令知道它的宿主或父元素的细节，你需要一个 ElementRef ，并将该引用传递给组件的方法是通过依赖注入(inject)。

考虑一个名为 SomeParentComponent 的组件和另一个组件，它是它的子组件:

@Component({ 
selector: 'some-child'
.. 
})
export class SomeChildComponent {
  constructor( @Self() private element: ElementRef ) {}
}

通过使用 @Self装饰器并注入(inject) ElementRef在构造函数中，您将获得对 <some-child> 的引用。元素，因此您可以查询 element.nativeElement 的特定属性喜欢 offsetHeight和 offsetWidth .

但是，当您查询这些属性时要小心，因为如果您使用 <ng-content> 投影了内容在 some-child 的模板内，或者您正在实例化另一个组件，您将在不同的生命周期 Hook 中获得这些属性的不同值，因为例如，投影内容仅存在于 ngAfterContentInit向前。

您还可以通过将其注入(inject)构造函数来获取父组件或组件树中任何组件的引用:

@Component({ 
selector: 'some-child'
.. 
})
export class SomeChildComponent {
  constructor( @Host() private someParent: SomeParentComponent ) {}
}

这样你就可以访问 SomeParentComponent 的类定义，使用甚至修改其公共(public)属性。

即使两者 @Host和 @Self装饰器的使用有点可选，它可以更清楚地说明您作为组件的依赖项传递的内容。

编辑 11/17/2017

为了访问您注入(inject)的 ElementRef 的属性有几种选择，您可以使用值访问器或仅使用简单的类方法:

@Component({...})
export class SomeChildComponent implements OnInit {
  // Using a getter accesor for each property
  get height(): number {
    return this.element.offsetHeight;
  }
  get width(): number {
    return this.element.offsetWidth;
  }

  // Using a getter accesor for both properties
  get dimensions(): { width: number, height: number } {
    return { width: this.element.offsetWidth, height: this.element.offsetHeight  }
  }

  constructor( @Self() private element: ElementRef ) {}

  ngOnInit() {
    console.log( this.height ); // this.element.nativeElement.offsetHeight
    console.log( this.width ); // this.element.nativeElement.offsetWidth
    console.log( this.dimensions ); // { width: this.element.offsetWidth, height: this.element.offsetHeight  }
    console.log( this.getDimensions() ); // { width: this.element.offsetWidth, height: this.element.offsetHeight  }
  }

  // Using a class method
  getDimensions() {
    return { width: this.element.offsetWidth, height: this.element.offsetHeight  }
  }
}