在 Angular 2+ 中实现对父元素的引用有几种方法,以下是其中一种:
在子组件中定义一个@Input
属性,用来接收父组件中需要传递的值。
在父组件的模板中,通过 #reference
定义一个本地模板引用,并传递给子组件。
在子组件中,通过 @ViewChild
获取本地模板引用。
最后,在子组件中调用 nativeElement
即可得到父组件中的元素。
具体代码如下:
在父组件模板中:
在子组件中:
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: ''
})
export class ChildComponent {
@Input() parentRef: ElementRef;
ngAfterViewInit() {
let parentEl = this.parentRef.nativeElement;
// 此时可操作父元素
}
}