使用 @ViewChild 和 @ViewChildren 查询 DOM

2019-11-15 08:00:00 · 飞浪

介绍 DOM操作负责修改现有DOM元素并更改其当前外观或行为。您可能还需要修改应用程序的其他重要部分，例如组件、指令和其他DOM元素。ViewChild和ViewChildren都用于在

介绍

DOM 操作负责修改现有 DOM 元素并更改其当前外观或行为。您可能还需要修改应用程序的其他重要部分，例如组件、指令和其他 DOM 元素。ViewChild和 ViewChildren都用于在组件之间进行通信以访问数据。

@ViewChild和@ViewChildren是用于访问子组件类及其不同属性到父组件的装饰器类型。它类似于继承。

让我们更详细地了解每一个。

Angular 中的 @ViewChild 是什么？

@ViewChild 装饰器用于从 DOM 树中查询单个 DOM 元素并允许您对其进行操作。要从模板中选择一个元素，可以使用三个不同的参数。

Selector：要查询的元素的选择器。它可以是指令类型或名称。
读取：从查询元素中读取不同的标记。
静态：这是 Angular 8 中引入的新功能之一，它表示是否在变更检测运行之前解析查询结果。

让我们看一个如何使用@ViewChild装饰器的例子。

首先，使用下面的ng命令创建除应用程序组件之外的新组件。

      Ng generate component democomponent

演示组件.组件.html

      <div>
    This is {{ componentName }} component
</div>
    

这里我们使用了在组件类中声明的本地输入变量，以打印来自父组件的值。

在组件中声明@Input变量，如下所示。

      import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-democomponent",
  templateUrl: "./democomponent.component.html",
  styleUrls: ["./democomponent.component.css"]
})

export class DemocomponentComponent implements OnInit {

  // To get component name from app component
  @Input() componentName: string;
  constructor() {}
}
    

我们已经完成了演示组件。现在，我们将使用我们之前创建的子组件并对其进行操作。

应用程序.组件.html

      <app-democomponent componentName="DEMO">

</app-democomponent>

如果您注意到，我们已经使用了附加属性以及子组件选择器，即componentName=DEMO。

应用程序.组件.ts

      import { Component, ViewChild } from "@angular/core";
import { DemocomponentComponent } from "./democomponent/democomponent.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular";

  // Getting the reference
  @ViewChild(DemocomponentComponent, { static: false }) hello: DemocomponentComponent;
  ngAfterViewInit() {
     console.log("Hello ", this.hello.componentName);
  }
}
    

我们可以使用“hello”变量直接访问子组件的属性。

      ngAfterViewInit() {
  console.log("Hello ", this.hello.componentName);
}
    

请注意，我们使用了ngAfterViewInit()钩子。你可能会问，为什么？当应用程序加载时，子元素可能未完全加载，如果我们尝试访问该组件，它会返回未定义。为了解决这个问题，我们使用了生命周期钩子，它允许我们在视图初始化后访问任何元素。

我们还可以使用@ViewChild访问任何特定元素，而不是引用整个组件，这是我们迄今为止所做的。用下面的代码替换代码。

      import { Component, ViewChild, ElementRef  } from "@angular/core";
import { DemocomponentComponent } from "./democomponent/democomponent.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular";
  // Getting the reference of the button control
  @ViewChild("myButton", { static: false }) myButton: ElementRef;

  ngAfterViewInit() {
   console.log("Hello ", this.myButton.nativeElement);
  }
}
    

我们所做的改变是，按钮控制元素现在是我们在 HTML 中使用的元素。

应用程序.组件.html

      <div>
 <button type="button" #myButton>My Button</button>
</div>
    

要访问原生元素，我们可以使用ElementRef，它返回原生 HTML 元素。可以从组件中像这样访问它：

      @ViewChild("myButton", { static: false }) myValue: ElementRef;
    

它可以使用ngAfterViewInit()访问原生元素，如下所示：

      ngAfterViewInit() {
    console.log("Hello ", this.myValue.nativeElement);
}
    

上述示例的输出将如下所示：

正如您在控制台中的上述输出中看到的那样，我们获得了作为原生元素的响应，因为ElementRef根据与@ViewChild一起获取的引用返回了原生元素。

因此，我们可以尝试上述任何一种方法从模板访问子元素或本机元素。

Angular 中的 @ViewChildren 是什么？

与@ViewChild不同，@ViewChildren装饰器用于访问多个元素。元素列表的响应始终是QueryList。

每当在 HTML DOM 树中添加、更新或删除任何子元素时，QueryList 将始终更新。

让我们看一个例子来更好地了解@ViewChildren的工作原理。

使用以下ng命令创建一个新组件。

      Ng generate component hello

你好.组件.html

      <div>
    <h1>Hello {{name}}!</h1> 
</div>
    

你好.component.ts

      import { Component, Input } from '@angular/core';

@Component({
  selector: "hello",
  templateUrl: "./hello.component.html",
  styleUrls: ["./hello.component.css"]
})

export class HelloComponent  {
  @Input() name: string;
}
    

在这个组件中，@Input装饰器用于从父组件获取值。

让我们深入挖掘并在一个简单的示例中将QueryList与@ViewChildren一起使用。

应用程序.组件.html

      <hello name="{{ name }}"></hello>

<hello name="{{ name }}"></hello>

<hello name="{{ name }}"></hello>

如您所见，我们已经使用了选择器三次以及名称属性。现在让我们尝试使用@ViewChildren访问它，如下所示。

应用程序.组件.ts

      import {
 Component,
 ViewChildren,
 AfterViewInit,
 QueryList
} from "@angular/core";
import { HelloComponent } from "./hello.component";

@Component({
 selector: "my-app",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.css"]
})

export class AppComponent implements AfterViewInit {

 name = "Angular";

 // Accessing multiple native DOM elements using QueryList
 @ViewChildren(HelloComponent) myValue: QueryList<HelloComponent>;

 ngAfterViewInit() {
     console.log("Hello ", this.myValue);
 }

}
    

在此组件中，我们需要通过引用子组件使用@ViewChildren访问多个原生 DOM 元素，如下所示。

      @ViewChildren(HelloComponent) myValue: QueryList<HelloComponent>;
    

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 @ViewChild 和 @ViewChildren 查询 DOM

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Component, OnInit, Input } from "@angular/core"; @Component({ selector: "app-democomponent", templateUrl: "./democomponent.component.html", styleUrls: ["./democomponent.component.css"] }) export class DemocomponentComponent implements OnInit { // To get component name from app component @Input() componentName: string; constructor() {} }

import { Component, ViewChild } from "@angular/core"; import { DemocomponentComponent } from "./democomponent/democomponent.component"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular"; // Getting the reference @ViewChild(DemocomponentComponent, { static: false }) hello: DemocomponentComponent; ngAfterViewInit() { console.log("Hello ", this.hello.componentName); } }

import { Component, ViewChild, ElementRef } from "@angular/core"; import { DemocomponentComponent } from "./democomponent/democomponent.component"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular"; // Getting the reference of the button control @ViewChild("myButton", { static: false }) myButton: ElementRef; ngAfterViewInit() { console.log("Hello ", this.myButton.nativeElement); } }

import { Component, Input } from '@angular/core'; @Component({ selector: "hello", templateUrl: "./hello.component.html", styleUrls: ["./hello.component.css"] }) export class HelloComponent { @Input() name: string; }

import { Component, ViewChildren, AfterViewInit, QueryList } from "@angular/core"; import { HelloComponent } from "./hello.component"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements AfterViewInit { name = "Angular"; // Accessing multiple native DOM elements using QueryList @ViewChildren(HelloComponent) myValue: QueryList<HelloComponent>; ngAfterViewInit() { console.log("Hello ", this.myValue); } }