[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 页面:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

\r\n和缓冲区/进度条小程序

一 前置知识 带有\n就会立马刷新缓冲区(因为显示器是行刷新)&#xff0c;\r不会刷新缓冲区 刷新的2个场景: 1 ~fflush 缓冲区中存在\r或\n --> \r fflush --> 不换行的\n) 2 ~ 文件关闭自动刷新缓冲区 倒计时小程序0-9 %-d是左对齐,%d是右对齐 倒计时小程序0-99 …

复试 || 就业day05(2023.12.31)算法篇

文章目录 前言找不同最长回文串找到所有数组中消失的数字下一个更大元素 I键盘行 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛谷或其他刷题平台 &#x1f4ab…

在Go中使用Goroutines和Channels发送电子邮件

学习如何使用Goroutines和Channels在Go中发送电子邮件 在现代软件开发的世界中&#xff0c;通信是一个关键元素。发送电子邮件是各种目的的常见实践&#xff0c;例如用户通知、报告等。Go是一种静态类型和编译语言&#xff0c;为处理此类任务提供了高效和并发的方式。在本文中&…

pycharm配置pyqt5的ui文件转py文件的小工具

在PyCharm中配置 PyQt5 的 .ui 文件转 .py 文件的小工具其实是配置一个外部工具&#xff0c;以便可以直接在 IDE 中通过单击按钮来完成这个转换。你需要使用 pyuic5 命令&#xff0c;它是 PyQt5 的工具集之一&#xff0c;用于将 .ui 文件&#xff08;用 Qt Designer 创建的&…

BED 文件格式 chip-seq m6a数据可视化会用到

General usage — bedtools 2.31.0 documentationhttps://bedtools.readthedocs.io/en/latest/content/general-usage.html BED格式&#xff08;Browser Extensible Data format&#xff09;是一种在生物信息学中广泛使用的文本文件格式&#xff0c;用于描述基因组上的特征和…

消息队列考点梳理 + 高频面试题

你好&#xff0c;本文我将和你一起梳理面试中消息队列的高频考点&#xff0c;做到温故知新。 面试中如何考察消息队列 消息队列作为日常开发中应用最高频的基础组件之一&#xff0c;相关的问题自然也是面试中的常客。 在面试中对消息队列的考察方式&#xff0c;主要包括两种…

机器人中的数值优化之线性共轭梯度法

欢迎大家关注我的B站&#xff1a; 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 本文ppt来自深蓝学院《机器人中的数值优化》 目录 1.无约束优化方法对比 2.Hessian-vec product 3.线性共轭梯度方法的步长​编辑 4.共轭梯度…

7.10非递减子序列(LC491-M)

算法&#xff1a; 在90.子集II (opens new window)中我们是通过排序&#xff0c;再去重来达到去重的目的。 而本题求自增子序列&#xff0c;是不能对原数组进行排序的&#xff0c;排完序的数组都是自增子序列了。 肯定还是回溯算法。 画树&#xff1a; 树里面其实有两个注意…

[python]python利用pyaudio录制系统声音没有立体声混音怎么录制系统音频

当电脑没有立体声混音导致Python写代码无法使用pyaudio进行录制系统声音怎么办&#xff1f;查阅资料和安装驱动等方法都不行&#xff0c;难道没办法了吗&#xff1f;那为什么电脑其他软件可以做到呢&#xff1f;因此研究了一下pyaudio在没有立体声混音情况下确实无法录制声音&a…

SpringBoot发布项目到docker

Dockerfile FROM openjdk:11 # 作者 MAINTAINER chenxiaodong<2774398338qq.com># 安装 vim # RUN yum -y install vim# 环境变量 # 进入容器后的默认工作目录 ENV WORKPATH /usr/local/webapp ENV EXECFILE Docker2Application-0.0.1-SNAPSHOT.jarRUN mkdir -p $WORKPA…

Android Matrix画布Canvas旋转Rotate,Kotlin

Android Matrix画布Canvas旋转Rotate&#xff0c;Kotlin private fun f1() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.…

hibernate 使用注解+拦截器实现自动开启、关闭session,提交、回滚事务

hibernate 使用注解+注解拦截器实现自动开启、关闭session,开启、提交、回滚事务 项目为springboot项目 ,springboot版本为:2.5.11, hiernate-core5.4.3 版本。spring-xxx 等为5.3.17版本 注意:在spring-xxx4.x版本+ hiernate-core5.x.x版本中,hibernate的配置 true是有效的…

软件开发新手用哪个IDE比较好?软件开发最好的IDE都在这!

目录 IDES 的优点 最佳编程 IDE 列表 Java 开发的流行集成开发环境 JetBrains 的 IntelliJ IDEA NetBeans 适用于 C/ C、C# 编程语言的最佳 IDE Visual Studio 和 Visual Studio 代码 Eclipse PHP 开发的最佳 IDE PHPStorm Sublime Text Atom JavaScript 的顶级 I…

局域网下的ROS多机通信

文章目录 一、通用控制模式二、网络连接三、软件设置3.1 ROS主机的bashrc文件3.2 ROS从机的bashrc文件3.3 注意事项四、远程控制4.1 SSH4.2 VNC五、具体操作流程安装ssh网络静态ip设置配置文件修改ssh登录多机通信文件配置参考

Python:正则表达式速通,码上上手!

1前言 正则表达式&#xff08;Regular Expression&#xff09;是一种用来描述字符串模式的表达式。它是一种强大的文本匹配工具&#xff0c;可以用来搜索、替换和提取符合特定模式的文本。 正则表达式由普通字符&#xff08;例如字母、数字、符号等&#xff09;和元字符&#…

运维工程师的未来出路:在技术演进中拓宽职业版图

运维工程师的出路到底在哪里&#xff1f; 运维工程师&#xff0c;这个看似传统的IT角色&#xff0c;在日新月异的技术浪潮中&#xff0c;其职业发展路径正在经历一场深刻的变革。他们不仅是企业IT系统的守护者&#xff0c;更是推动技术创新和业务发展的重要力量。随着云计算、…

2023 AI开发者生态报告

随着人工智能技术的飞速发展&#xff0c;全球IT市场对AI的投入持续增长&#xff0c;预计到2027年将达到4236亿美元。中国作为AI领域的重要参与者&#xff0c;其投资规模预计将占全球的9%。在这样的背景下&#xff0c;2023年的《AI开发者生态报告》为我们揭示了人工智能时代的技…

Linux的账号及权限管理

一.管理用户账号 1.1 用户账户的分类 1.1.1 用户账号的分类 超级用户&#xff1a;&#xff08;拥有至高无上的权利&#xff09; root用户是Linux操作系统中默认的超级用户账号&#xff0c;对本主机拥有最高的权限&#xff0c;系统中超级用户是唯一的。普通用户&#xff1a; …

centos7.9 TCP 加速

BBR是谷歌开发的新的TCP加速算法&#xff0c;在网络状况不好的服务器上开启TCP的bbr&#xff0c;可以在无需增加任何硬件投入的情况下实现网络加速&#xff0c;并且客户端无需做任何配置&#xff0c;因此使用起来非常的方便。TCP加速对网络状况较好的内网环境&#xff0c;或者大…

【Python_PySide2学习笔记(二十一)】输入对话框QInputDialog类的基本用法

输入对话框QInputDialog类的基本用法 输入对话框QInputDialog类的基本用法前言正文1、整数输入框 QInputDialog.getInt()2、浮点数输入框 QInputDialog.getDouble()3、单行文本输入框 QInputDialog.getText()4、多行文本输入框 QInputDialog.getMultiLineText()5、下拉列表输入…