全方位解析Angular属性选择器@ViewChild

2024-01-17 23:47:52

Angular中的@ViewChild属性选择器

Angular中有19种内置装饰器，其中5个是类装饰器，6个是属性装饰器，2个是方法装饰器，6个是参数装饰器。@ViewChild是一个属性装饰器，用来从模板视图中获取匹配元素。

@ViewChild的使用方法

@Component({
  selector: 'my-component',
  template: '<div #my-element></div>'
})
export class MyComponent {
  @ViewChild('my-element') elementRef: ElementRef;
}

在上面的代码中，@ViewChild装饰器被用来将模板中的<div #my-element></div>元素注入到elementRef属性中。这样，我们就可以在组件中访问该元素。

@ViewChild的常见应用场景

访问子组件

我们可以使用@ViewChild装饰器来访问子组件的实例。这对于在父组件中调用子组件的方法或获取子组件的数据非常有用。

@Component({
  selector: 'parent-component',
  template: '<child-component #child></child-component>'
})
export class ParentComponent {
  @ViewChild('child') childComponent: ChildComponent;

  ngAfterViewInit() {
    this.childComponent.doSomething();
  }
}

访问DOM元素

我们还可以使用@ViewChild装饰器来访问DOM元素。这对于在组件中操作DOM非常有用。

@Component({
  selector: 'my-component',
  template: '<div #my-element></div>'
})
export class MyComponent {
  @ViewChild('my-element') elementRef: ElementRef;

  ngAfterViewInit() {
    this.elementRef.nativeElement.style.color = 'red';
  }
}

与其他指令交互

我们还可以使用@ViewChild装饰器与其他指令交互。例如，我们可以使用@ViewChild装饰器来获取表单控件的指令实例，然后我们可以使用该指令的方法来验证表单数据。

@Component({
  selector: 'my-component',
  template: '<input type="text" #my-input>'
})
export class MyComponent {
  @ViewChild('my-input') inputElementRef: ElementRef;

  ngAfterViewInit() {
    const inputControl = this.inputElementRef.injector.get(NgControl);
    inputControl.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}