angular2中@viewchild的使用

最新推荐文章于 2022-11-30 15:00:31 发布
原创 最新推荐文章于 2022-11-30 15:00:31 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在前端开发中如何在父组件中正确地使用子组件的方法。通过一个具体示例，展示了在父组件的HTML代码中引入子组件时，需要在子组件标签上添加特定标识符，并在父组件的TypeScript文件中通过@ViewChild装饰器来获取该子组件实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.在父组件中如果想要使用子组件需要引入子组件

父组件的部分html的html代码，如下图所示：

<header class="header navbar navbar-fixed-top-xs">
<top-nav #topNav></top-nav>
</header>


父组件的componet.ts代码如下：

@ViewChild('topNav')
public topNav: TopNavComponent;


从中我们可以发现父组件要想获取子组件，父组件的html在使用子组件的标签时，必须加上#名称，而名称即为@ViewChild('')括号中的参数

Angular 框架中的 @ViewChild 装饰器
孔乙己的博客
08-20 1503
ViewChild是 Angular 框架中的一个装饰器，用于在 Angular 组件类中获取对 DOM 元素或子组件的引用和操作。它在数据绑定和视图的交互动作用中扮演着关键角色。当你需要与模板中的某个元素或组件直接交互时，@ViewChild装饰器是工具箱中非常有用的一部分。在 Angular 中，@ViewChild会在组件或指令的视图初始化（生命周期钩子）之后被设置，它提供了一种便捷的方法来访问 DOM 元素、指令实例以及子组件。
angular8版本的脚手架使用@ViewChild，会出现问题
coders_Lz的博客
07-24 2021
angular学习之采坑记录
Angular2父子组件之间数据传递：@ViewChild获取子组件 ...
weixin_30268921的博客
07-09 522
​我们在《Angular2父子组件之间数据传递：局部变量获取子组件》讲到过（如果有不懂的，可以先去看看），通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢？ 答案：肯定是有的，接下来我们讲下通过@ViewChild来实现！ 淡描@Vie...
Angular 2 ViewChild & ViewChildren
weixin_34380948的博客
03-14 147
阅读 Angular 6/RxJS 最新教程，请访问前端修仙之路 ViewChild ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正确获取查询的元素。 @ViewChild 使用模板变量名 imp...
angular知识点--@ViewChild详解
奇怪的人类
09-10 1万+
ViewChild可以获取到当前组件视图中的单个元素@ViewChildren获取子组件对象列表。
浅谈Angular中@ViewChild的用法
IMSI的博客
11-30 3440
@ViewChild
angular中的@ViewChild
最新发布
12-29
### Angular 中 `@ViewChild` 的使用方法 #### 获取组件或指令引用 `@ViewChild` 装饰器允许父组件获取其视图内定义的子组件或指令的实例。这可以通过指定目标的选择器来完成，可以是类型、字符串或其他。 ```...
Angular 2父子组件数据传递之@ViewChild获取子组件详解
08-30
Angular 2中父子组件数据传递是非常重要的概念之一，而@ViewChild正是用于实现父子组件数据传递的重要工具之一。@ViewChild的作用是声明对子组件元素的实例引用，通过注入的方式将子组件注入到@ViewChild容器中。 ...
angular之@ViewChild的使用
qq_39961695的博客
08-24 5001
简单来说 个人对@viewChild的理解就是：它是一个指代，可以通过这个指代，得到这个组件或者元素。并且我们可以使用得到的这个组件的值和方法。 为了更直观的知道它是做什么，直接上代码 通过@viewChild获取子组件，得到子组件的值、调用子组件的方法 子组件child content:'Zita'; changeChildCon() { this.content = 'Zita1111' } 父组件parent html <app-child #ChildrenView></app
Angular2中对ViewChild、ContentChild、ViewChildern的理解
weixin_38961318的博客
01-04 2157
@ViewChild() 括号中可以填写2种类型的参数 Type和string 在ngAfterViewInit钩子回调前完成。 一个ViewChild匹配一个组件，案例： 1.父组件中定义@ViewChild() 简单来理解就是父组件查看子组件 那就肯定写在父组件中了。 @ViewChild('child1') child1:ChildComponent; 2.父组件模板.htm
项目总结之angular4.0中的@viewchild，@Input，@Output
时清云的博客
01-26 1332
在项目中遇到了这样一个问题，父页面中需要操作子组件里面的方法，这个时候需要怎么做呢？项目是由ionic3.0和angular4.0构成的 代码如下： child的html页面如下： ...
angular @ViewChild使用
Jq的博客
09-17 753
通过@ViewChild获取子组件，得到子组件的值、调用子组件的方法 //子组件child @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class Child{ public content::string = '123', public change(){ this.content =
【Angular】Angular中使用@ViewChild
余浩的博客
05-05 433
Angular中使用ViewChild获取dom节点 模板中给dom起一个名字<div #myBox>我是一个dom节点</div> 在业务逻辑里面引入ViewChildimport {Component,OnInit,ViewChild} from '@angular/core' 写在类里面 @ViewChild('myBox') myBox:any; 在ngAfterViewInit生命周期函数里面获取domthis.myBox.nativeElement 父组件中使用Vie
angular2 引用页面元素@ViewChild和ElementRef
xlovelace的博客
01-05 2709
import { Component, ViewChild, ElementRef } from '@angular/core' @Component({ selector: 'home', template: ` Test ` }) export class HomeComponent{ @ViewChild('testElem') el:El
Angular2+ ViewChild & ViewChildren解析
xwnxwn的专栏
08-19 1844
ViewChild     ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，才能正确获取查询的元素。 @ViewChild 通过模板变量名获取DOM元素 import { Component, ElementRef, ViewChild, AfterViewIn...
angular——ViewChild
肖的博客
06-08 736
ViewChild 获取 DOM 节点 模板中给 DOM 节点起个名字 <div #domName> 我是一个 DOM 节点 </div> 业务逻辑组件内引入 ViewChild import { Component, OnInit, ViewChild } from '@angular/core' 在类里面获取 DOM 节点 @ViewC...
Angular ViewChild ViewChildren
yanyi24的博客
02-22 1120
在任何js框架下，获取元素都是常用且重要的操作。这一节，我们将介绍Angular中如何使用ViewChild来获取DOM元素、组件、指令。（原文阅读） 在这之前，我们需要先了解一个Angular的生命周期函数AfterViewInit AfterViewInit 定义：一个生命周期钩子，会在 Angular 完全初始化了组件的视图后调用。 在组件中注入这个钩子函数后，就必须实现它的方法ngAfterViewInit()。（不用担心，编辑器会提示你的） ngAfterViewInit() 一个回调方法，它.
angular2中ViewChild，索引值相关
Irmhy
08-24 1218
2017/8/24 时间1.知识点一：angular2中的@ViewChild与@ViewChildrenViewChild属性装饰器，用来在模板视图中获取匹配的元素@ViewChild(TableComponent); table:TableComponentViewChildren用来匹配多个元素，返回的结果是一个QueryList集合@ViewChildren(TableComponent)
angular6 @ViewChild注解学习(模板引用#)
热门推荐
黄彪博客
07-15 1万+
文章目录文章参考Angular 中的 dom 操作（原生 js）Angular 中的 dom 操作（ViewChild）父子组件中通过 ViewChild 调用子组件完整案例 文章参考 08 Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet) Angular 中的 dom 操作（原生 js） ngAfterViewInit()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值