[Angular] 笔记 21:@ViewChild

chatgpt:
在 Angular 中,@ViewChild 是一个装饰器,用于在组件类中获取对模板中子元素、指令或组件的引用。它允许你在组件类中访问模板中的特定元素,以便可以直接操作或与其交互。

例如,如果你在模板中有一个子组件或一个具有本地引用的元素,你可以使用 @ViewChild 装饰器在组件类中获取对该元素的引用。这样,你就可以在组件类中调用该元素的方法、访问其属性或者订阅其事件。

这是一个简单的示例,演示了如何在 Angular 组件中使用 @ViewChild

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

@Component({
  selector: 'app-example',
  template: `
    <div #myElement>Some content</div>
  `
})
export class ExampleComponent {
  @ViewChild('myElement', { static: true }) myElementRef: ElementRef;

  ngAfterViewInit() {
    // 可以在这里访问和操作子元素
    console.log(this.myElementRef.nativeElement.textContent); // 获取子元素的文本内容
    this.myElementRef.nativeElement.style.color = 'red'; // 修改子元素的样式
  }
}

在这个例子中,@ViewChild 装饰器用于获取模板中带有 #myElement 本地引用的 <div> 元素的引用,并在 ngAfterViewInit 生命周期钩子中对其进行操作。

需要注意的是,@ViewChild 装饰器接受一个选择器作为参数,用于定位模板中的元素。在这里,我们使用了 #myElement 选择器来获取对应的元素引用。

另外,{ static: true }@ViewChild 的一个配置选项,用于指定何时应该去查询视图中的元素。{ static: true } 表示在组件初始化时就会进行查询,{ static: false } 表示在首次调用 ngAfterViewInit 生命周期钩子时进行查询。


Angular For Beginners - 25. @ViewChild()

当使用 JavaScript 时,可以使用 getElementById 来获取特定的 HTML 元素对象。但在 Angular 中,并没有类似于 getElementById 的直接函数。相反,Angular 提供了 @ViewChild 这样的装饰器,用于在组件类中获取模板中特定元素的引用,从而实现类似的功能。

在这里插入图片描述

但是,getElementById 的参数与 @ViewChild 的参数有很大的不同。 不能传 html 标签或 css 选择器给 @ViewChild,传进 @ViewChild 中的参数分以下 4 种:

在这里插入图片描述

在这里插入图片描述

1.

pokemon-list.compoment.html 增加一个 template ref #pokemonRef:

<table>
  <thead>
    <th>Name</th>
    <th>Index</th>
  </thead>
  <tbody>
    <app-pokemon-detail
      #pokemonRef     // new code
      *ngFor="let pokemon of pokemons"
      [detail]="pokemon"
      (remove)="handleRemove($event)"
    >
      <h1>-----------------------</h1>
      <h2>============================</h2>
      <h3></h3>
    </app-pokemon-detail>
  </tbody>
</table>

2.

多个孩子用 @ViewChildren ,单个用 @ViewChild

@ViewChild 只能在 View 渲染之后才能使用:

在这里插入图片描述

pokemon-list.compoment.ts :

因为 ngAfterViewInit 继承了 AfterViewInit, 所以 PokemonListComponent 需要 implement AfterViewInit:

export class PokemonListComponent implements OnInit, AfterViewInit {

完整代码如下:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { Pokemon } from 'src/app/models/pokemon';
import { PokemonService } from 'src/app/services/pokemon.service';

@Component({
  selector: 'app-pokemon-list',
  templateUrl: './pokemon-list.component.html',
  styleUrls: ['./pokemon-list.component.css'],
})
export class PokemonListComponent implements OnInit, AfterViewInit {
  // pokemons!: Pokemon[];
  pokemons: Pokemon[] = [];

  // 这里不是 @ViewChild, 否则log 为 undefined
  // 而是 @ViewChildren,使用了 for 循环, 孩子数多于一个,有3个。
  @ViewChildren('pokemonRef') pokemonRef!: ElementRef;

  constructor(private pokemonService: PokemonService) {}

  // 新代码
  ngAfterViewInit(): void {
    // throw new Error('Method not implemented.');
    console.log("ngAfterViewInit begin")
    console.log(this.pokemonRef)
    console.log("ngAfterViewInit end")
  }

  handleRemove(event: Pokemon) {
    this.pokemons = this.pokemons.filter((pokemon: Pokemon) => {
      return pokemon.id !== event.id;
    });
  }

  ngOnInit(): void {
    // 填充 pokemons 属性
    // this.pokemons = this.pokemonService.getPokemons();
    this.pokemonService.getPokemons().subscribe((data: Pokemon[]) => {
      console.log(data);
      this.pokemons = data;
    });
  }
}

3. web 页面:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值