angular模板引用

引用1个模板元素

在Angular中，模板引用是一种在模板中引用组件、指令或HTML元素的方式。通过使用模板引用，你可以在组件代码中访问模板中的元素，以便在组件逻辑中进行操作或获取信息。

要创建一个模板引用，可以使用在HTML元素上使用#符号，后面跟上一个唯一的名称。例如：

<input #myInput type="text">
<button (click)="doSomething(myInput.value)">Click</button>

在上面的例子中，我们在input>元素上定义了一个模板引用#myInput。在按钮的点击事件处理器中，我们可以通过myInput.value来获取输入框的值，并进行一些操作。

在组件的类中，你可以使用ViewChild装饰器和ElementRef类型来引用模板中的元素。例如，在组件中引用上面示例中的输入框可以这样做：

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

@Component({
  selector: 'app-my-component',
  template: `
    <input #myInput type="text">
    <button (click)="doSomething()">Click</button>
  `
})
export class MyComponent {
  @ViewChild('myInput', { static: true }) myInputRef: ElementRef;

  doSomething() {
    console.log(this.myInputRef.nativeElement.value);
  }
}

在上面的代码中，我们使用@ViewChild装饰器来将模板引用myInput与类中的myInputRef属性进行关联。在按钮的点击事件处理函数中，我们可以通过this.myInputRef.nativeElement.value来访问并打印出输入框的值。

需要注意以下几点：

模板引用只能在当前组件的模板中进行访问，无法跨组件传递。

使用@ViewChild装饰器时，需要指定第二个参数来设置静态或动态查询： { static: true } 或 { static: false }。这取决于模板引用的位置和组件初始化的时机。

引用多个模板元素

在Angular中，可以使用模板引用变量或查询方法引用多个模板元素。

使用模板引用变量：
在HTML模板中，你可以通过在元素上添加#符号并指定一个名称来创建模板引用变量。可以在同一个模板中的多个元素上使用不同的引用变量名。例如：

<input #input1 type="text">
<input #input2 type="text">

在组件类中，可以使用@ViewChild或@ViewChildren装饰器以及ElementRef类型来引用这些模板元素。例如：

import { Component, ViewChild, ViewChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input #input1 type="text">
    <input #input2 type="text">
  `
})
export class MyComponent {
  @ViewChild('input1', { static: true }) input1Ref: ElementRef;
  @ViewChild('input2', { static: true }) input2Ref: ElementRef;
  @ViewChildren('input') inputRefs: QueryList<ElementRef>;

  ngAfterViewInit() {
    console.log(this.input1Ref.nativeElement.value);
    console.log(this.input2Ref.nativeElement.value);
    this.inputRefs.forEach(inputRef => {
      console.log(inputRef.nativeElement.value);
    });
  }
}

在上面的代码中，我们使用了两个模板引用变量input1和input2来引用两个输入框。在组件类中，我们使用@ViewChild装饰器分别将它们与类中的input1Ref和input2Ref属性进行关联。在ngAfterViewInit生命周期钩子中，我们可以访问这些模板元素的属性，例如value。

使用查询方法：
另一种引用多个模板元素的方法是使用查询方法。在组件类中，可以使用@ViewChildren装饰器和QueryList类型来创建一个查询方法。使用选择器来指定要查询的元素。例如：

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text">
    <input type="text">
  `
})
export class MyComponent {
  @ViewChildren('input') inputRefs: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.inputRefs.forEach(inputRef => {
      console.log(inputRef.nativeElement.value);
    });
  }
}

-在上面的代码中，我们使用了一个查询方法来引用所有选择器为input的元素。在ngAfterViewInit生命周期钩子中，我们可以通过迭代inputRefs来访问每个元素的属性。

需要注意以下几点：

• 使用模板引用变量时，可以在模板中的任何位置定义引用变量，并在组件类中使用@ViewChild或@ViewChildren装饰器进行引用。

• 使用查询方法时，选择器可以是CSS类、指令名、组件名等。