Angular-ViewChild

jiezi

5 年前

该指令配置视图查询的属性装饰器，更改检测器在视图 dom 中查找与选择器匹配的第一个元素或指令。如果视图 dom 更改，并且新的子项与选择器匹配，则更新属性.
source code:

export interface ViewChildDecorator {
     * Supported selectors include:
     *   * any class with the `@Component` or `@Directive` decorator
     *   * a template reference variable as a string (e.g. query `<my-component #cmp></my-component>`
     * with `@ViewChild('cmp')`)
     *   * any provider defined in the child component tree of the current component (e.g.
     * `@ViewChild(SomeService) someService: SomeService`)
     *   * any provider defined through a string token (e.g. `@ViewChild('someToken') someTokenVal:
     * any`)
     *   * a `TemplateRef` (e.g. query `<ng-template></ng-template>` with `@ViewChild(TemplateRef)
     * template;`)
    (selector: Type<any> | Function | string, opts?: {read?: any;}): any;
    new (selector: Type<any> | Function | string, opts?: {read?: any;}): ViewChild;
}

在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。
元数据属性：
【selector】- 用于查询的指令类型或名字。
【read】- 从查询到的元素中读取另一个令牌。
【static】- 是否在运行更改检测之前解析查询结果（即仅返回静态结果）。如果不提供此选项，编译器将返回其默认行为，即使用查询结果来确定查询解析的时间。如果任何查询结果位于嵌套视图（例如 *ngif）中，则将在运行更改检测之后解析该查询。否则，将在运行更改检测之前解决此问题。

所支持的选择器包括：

任何带有 @Component 或 @Directive 装饰器的类
字符串形式的模板引用变量（比如可以使用 @ViewChild(‘cmp’) 来查询 <my-component #cmp></my-component>
组件树中任何当前组件的子组件所定义的提供商（比如 @ViewChild(SomeService) someService: SomeService）
任何通过字符串令牌定义的提供商（比如 @ViewChild(‘someToken’) someTokenVal: any）
TemplateRef（比如可以用 @ViewChild(TemplateRef) template; 来查询 <ng-template></ng-template>

@ViewChild('ContentElement') mainContent: ElementRef;
在用原生 JS 中，我们取一个 dom 元素，使用 document.getElementById(‘ 元素 ID’), 在 NG 中用 nativeElement 来获取一个 dom 元素对象
HTML:

### <div id="divContent" #ContentElement>【divContent】：dom 元素 id【#TempContent】:a template reference variable as a string, 字符串的模板、doc 元素变量
</div>

TS:

export class AngularViewchildComponent implements OnInit, AfterContentInit {@ViewChild('ContentElement') mainContent: ElementRef;
  constructor() {}
  ngOnInit() {console.dir(this.mainContent.nativeElement);
    console.dir(document.getElementById('divContent'));
  }
  ngAfterContentInit(): void {}
}

监控结果：

用法一：字符串形式的模板引用变量