我决定深入使用带有Angular的CSS Grids，我正在研究的一个功能是允许组件根据自己的测量值动态生成与黄金比例成比例的自己的网格。我已将@ViewChild与#someName一起添加到我想要调用的元素中，因此我认为相同的主体将适用于定位父容器或其自己的自身。我遇到ElementRef和TemplateRef，但这些似乎只针对该组件的子项。
在很多实例中，我可以通过使用父组件中的@ViewChild并通过@Input将大小发送到子组件来实现这一点。我唯一想到的就是在<router-outlet>中加载组件的实例。有没有我可以用来做这个的方法？
答案 0 :(得分：2)
实际上，如果您希望组件或指令了解其主机或父元素的细节，则需要ElementRef，并且通过依赖注入将该引用传递给组件的方式
考虑一个名为SomeParentComponent的组件和另一个组件，它是它的子组件：
@Component({
selector: 'some-child'
..
})
export class SomeChildComponent {
constructor( @Self() private element: ElementRef ) {}
}
通过使用@Self装饰器并在构造函数中注入ElementRef，您将获得对<some-child>元素的引用，因此您可以查询{{1}的特定属性像} element.nativeElement和offsetHeight。
但是，当您查询这些属性时要小心，因为如果您在offsetWidth模板内使用<ng-content>投影内容，或者您正在实例化另一个组件，则会得到不同的值不同生命周期钩子中的那些属性，因为例如，预计内容仅存在于some-child之后。
您还可以通过在构造函数中注入父组件或组件树中的任何组件来获取它的引用：
ngAfterContentInit这样您就可以访问@Component({
selector: 'some-child'
..
})
export class SomeChildComponent {
constructor( @Host() private someParent: SomeParentComponent ) {}
}
的类定义，使用甚至修改其公共属性。
即使SomeParentComponent和@Host装饰器都是可选的，它也会更清楚你作为依赖项传递给你的组件。
为了访问注入@Self的属性，有几种选择，你可以使用值访问器或只使用普通类方法：
ElementRef