装饰器详解

作者:Yuan Tang

更新于:5 个月前

字数统计:1.9k 字

阅读时长:6 分钟

@ViewChild (selector,option:object) 个人理解获取对应的引用做相关操作类似

元数据说明

在 @ViewChild 的括号中，可以写以下几种内容：
组件类名：可以直接写组件的类名，用于获取对子组件的引用。例如： @ViewChild(ChildComponent, { static: true })
元素引用变量名：可以写模板中使用 # 定义的元素引用变量名，用于获取对该元素的引用。例如： @ViewChild('myElement', { static: true })
指令类名：可以直接写指令的类名，用于获取对指令的引用。例如： @ViewChild(MyDirective, { static: true })
组件实例：可以直接写组件的实例，用于获取对该组件的引用。例如： @ViewChild(ChildComponent, { static: true }) childComponent: ChildComponent;
组件模板引用变量：可以写模板中使用 # 定义的组件模板引用变量名，用于获取对该组件的引用。例如： @ViewChild('childRef', { static: true }) childComponent: ChildComponent; 需要注意的是，在使用 @ViewChild 时，需要将 { static: true } 作为第二个参数传递，以确保在 ngAfterViewInit 生命周期钩子之前获取到对应的引用。

在使用  `@ViewChild`  时，第二个参数是一个配置对象，用于指定一些参数选项。该配置对象可以包含以下几个参数：
 1.  `static` ：这是一个布尔值，默认为  `false` 。当设置为  `true`  时，表示查询应该在静态查询阶段进行，即在组件的构造函数之前。当设置为  `false`  时，表示查询应该在动态查询阶段进行，即在  `ngAfterViewInit`  生命周期钩子之后。
   示例： `@ViewChild('myElement', { static: true })` 
 2.  `read` ：这是一个类型或提供器的引用，默认为  `undefined` 。当查询结果是一个提供器时，可以使用  `read`  参数来指定提供器的类型，以确保获取到正确的引用。
   示例： `@ViewChild('myElement', { read: ElementRef })` 
 3.  `descendants` ：这是一个布尔值，默认为  `false` 。当设置为  `true`  时，表示查询应该包括所有后代元素。当设置为  `false`  时，表示查询只应该包括直接子元素。
   示例： `@ViewChild('myElement', { descendants: true })` 
 这些参数可以根据需要进行组合使用，以满足具体的查询需求。希望对您有所帮助！如果您有任何其他问题，请随时提问。

用于获取对子组件的引用

`@ViewChild`  是 Angular 中的一个装饰器，用于在组件中获取对子组件、DOM 元素或指令的引用。它允许您通过在组件类中声明一个属性，并使用  `@ViewChild`  装饰器来获取对应的引用。
 以下是  `@ViewChild`  的使用示例：
 1. 导入  `ViewChild` ：
import { Component, ViewChild } from '@angular/core';
2. 在组件类中声明一个属性，并使用  `@ViewChild`  装饰器来获取引用：
@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component></app-child-component>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent)
  childComponentRef!: ChildComponent;
}
在上述示例中，我们在  `ParentComponent`  中声明了一个属性  `childComponentRef` ，并使用  `@ViewChild`  装饰器来获取对  `ChildComponent`  的引用。
 请注意以下几点：
 -  `@ViewChild`  接受一个参数，用于指定要获取引用的组件、DOM 元素或指令。在示例中，我们使用  `ChildComponent`  作为参数。
-  `@ViewChild`  装饰器可以与类属性的类型注解一起使用，以确保获取的引用类型正确。
- 如果要获取对 DOM 元素的引用，可以使用  `ElementRef`  类型注解。
 通过使用  `@ViewChild` ，您可以在父组件中访问和操作子组件、DOM 元素或指令的属性和方法。

要使用 @ViewChild 操作子组件，您可以按照以下步骤进行操作：

首先，确保您已经在父组件的模板中使用了子组件的选择器。例如，在父组件的模板中添加子组件的选择器 <app-child></app-child> 。
在父组件的类中，使用 @ViewChild 装饰器声明一个属性，并指定子组件作为参数。例如，如果子组件的类名是 ChildComponent ，则可以这样声明属性：

   1. import { Component, ViewChild } from '@angular/core';
         import { ChildComponent } from './child.component';
      @Component({
       selector: 'app-parent',
       template: `
        <app-child></app-child>
      `
         })
         export class ParentComponent {
      @ViewChild(ChildComponent)
      childComponent!: ChildComponent;
        }
 2. 现在，您可以在父组件的类中使用  `childComponent`  属性来访问子组件的属性和方法。例如，如果子组件有一个名为  `childMethod()`  的方法，您可以在父组件中调用该方法：
    export class ParentComponent {
      @ViewChild(ChildComponent)
      childComponent!: ChildComponent;
       callChildMethod() {
        this.childComponent.childMethod();
      }
    }

通过以上步骤，您可以使用 @ViewChild 获取子组件的引用，并在父组件中操作子组件的属性和方法。请注意， @ViewChild 只能获取到模板中的第一个匹配项。如果有多个相同类型的子组件，您可以使用 @ViewChildren 来获取一个子组件的集合。希望这可以帮助到您！如果您有任何其他问题，请随时提问。

获取dom元素

使用  `@ViewChild`  获取组件模板中的 DOM 元素与获取子组件的方式类似，只是需要将参数指定为  `ElementRef`  类型。以下是使用  `@ViewChild`  获取组件模板中的 DOM 元素的步骤：
 1. 在父组件的类中，使用  `@ViewChild`  装饰器声明一个属性，并将参数指定为  `ElementRef`  类型。例如，如果要获取一个具有  `#myElement`  模板引用的元素，可以这样声明属性：
import { Component, ViewChild, ElementRef } from '@angular/core';
 @Component({
  selector: 'app-parent',
  template: `
    <div #myElement>这是一个 DOM 元素</div>
  `
})
export class ParentComponent {
  @ViewChild('myElement', { static: true })
  myElement!: ElementRef;
}
在上面的代码中， `myElement`  属性的类型被指定为  `ElementRef` 。
 2. 现在，您可以在父组件的类中使用  `myElement`  属性来访问模板中的 DOM 元素。例如，您可以获取元素的文本内容或修改元素的样式：
export class ParentComponent {
  @ViewChild('myElement', { static: true })
  myElement!: ElementRef;
   ngAfterViewInit() {
    console.log(this.myElement.nativeElement.textContent); // 获取元素的文本内容
    this.myElement.nativeElement.style.color = 'red'; // 修改元素的样式
  }
}
在上面的代码中， `nativeElement`  属性用于访问实际的 DOM 元素。
 通过以上步骤，您可以使用  `@ViewChild`  获取组件模板中的 DOM 元素，并对其进行操作。请注意， `@ViewChild`  也可以用于获取具有模板引用的其他元素或组件。

用于获取对指令的引用

要获取对指令的引用，可以使用  `@ViewChild`  装饰器，并将参数指定为指令的类型。以下是获取指令引用的步骤：
1. 在父组件的类中，使用  `@ViewChild`  装饰器声明一个属性，并将参数指定为指令的类型。例如，如果要获取一个名为  `MyDirective`  的指令的引用，可以这样声明属性：
import { Directive, ViewChild, ElementRef } from '@angular/core';
 @Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  // 指令的逻辑代码
}
 @Component({
  selector: 'app-parent',
  template: `
    <div myDirective>这是一个使用指令的元素</div>
  `
})
export class ParentComponent {
  @ViewChild(MyDirective, { static: true })
  myDirective!: MyDirective;
}
在上面的代码中， `myDirective`  属性的类型被指定为  `MyDirective` ，它对应于指令的类名。
 2. 现在，您可以在父组件的类中使用  `myDirective`  属性来访问指令的方法或属性。例如，您可以调用指令的方法或获取指令的属性：
export class ParentComponent {
  @ViewChild(MyDirective, { static: true })
  myDirective!: MyDirective;
   ngAfterViewInit() {
    this.myDirective.someMethod(); // 调用指令的方法
    console.log(this.myDirective.someProperty); // 获取指令的属性
  }
}
在上面的代码中， `myDirective`  属性可以像访问普通的类实例一样使用。
 通过以上步骤，您可以使用  `@ViewChild`  获取对指令的引用，并与指令进行交互。请注意， `@ViewChild`  还可以用于获取其他组件或模板中的元素的引用。

Contributors

Yuan Tang

装饰器详解 ​

@ViewChild (selector,option:object) 个人理解获取对应的引用做相关操作类似 ​

Contributors ​

装饰器详解

@ViewChild (selector,option:object) 个人理解获取对应的引用做相关操作类似

Contributors