首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 2+中锚发生变化的html元素后,如何设置@ViewChild('anchor_name')?

在Angular 2+中,要设置@ViewChild('anchor_name'),可以按照以下步骤进行操作:

  1. 首先,在组件的类中导入ViewChild装饰器和ElementRef类:
代码语言:txt
复制
import { Component, ViewChild, ElementRef } from '@angular/core';
  1. 在组件类中定义一个ViewChild装饰器,并将其绑定到一个模板中的锚点元素上。假设锚点元素的模板引用变量名为"anchor_name",则可以这样定义ViewChild装饰器:
代码语言:txt
复制
@ViewChild('anchor_name', { static: false }) anchor: ElementRef;

这里的第一个参数是模板引用变量名,第二个参数是一个配置对象,其中的"static"属性设置为false表示在组件的视图初始化之后再进行查询。

  1. 在需要的地方使用anchor变量来访问锚点元素。例如,可以在组件的某个方法中使用anchor来获取锚点元素的属性或调用其方法:
代码语言:txt
复制
ngAfterViewInit() {
  console.log(this.anchor.nativeElement);
  // 可以访问锚点元素的属性或调用其方法
}

需要注意的是,@ViewChild装饰器返回的是一个ElementRef对象,通过访问其nativeElement属性可以获取到原生的HTML元素。

关于Angular 2+中@ViewChild的更多详细信息,可以参考腾讯云的Angular开发文档: https://cloud.tencent.com/document/product/1130/36791

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-生命周期钩子 顶

ngOnInit Angular首次显示数据绑定属性并设置指令/组件输入属性,初始化指令/组件。 第一次ngOnChanges之后调用一次。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...OnInit 使用ngOnInit有两个主要原因: 施工不久执行复杂初始化 Angular设置输入属性后设置组件 有经验开发人员同意组件应该便于构建且安全。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性构建之后才会设置。...内容投影指示标记是(a)组件元素标签之间HTML和(b)组件模板存在标签。 AfterContent挂钩 AfterContent挂钩与AfterView挂钩类似。

6.1K10

【组件篇】ionic3分组索引及点滚动列表

——群里有人发就补充上来了 其中有不少人私信我,说ionic3-index-list有问题,我没理,今天又有人和我说,于是我简单看了下源码,没发现什么问题(后来发现个原有组件不能动态刷新点栏Bug)...,只是觉得它写得有点复杂了,和现有ionic组件集成度还没那么好(如不能很好兼容使用单选和多选列表),所以花了几分钟,大部分沿用原来代码基础下,简单改动了下: 移除多余ion-index-cell...; ion-index-section修改为index-group,并替换为官方list相关组件; 修改点滚动逻辑; 修改原有组件不能动态刷新点栏bug; 代码为index-list(原来代码基本没动...,只改动点滚动逻辑)和index-group(重新实现)共两个组件,所以会发现两种不同代码风格。...另外,index-list其实应该可以再精简,只是我目前懒得花时间去改了,留给你们谁有兴趣再改吧。源码放在了ionic-components

1.4K20

Angular 从入坑到挖坑 - 组件食用指南

一、Overview angular 入坑记录笔记第二篇,介绍组件相关概念,以及如何angular 通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...4.1.2、模板绑定语法 angular 应用,组件扮演着控制器或是视图模型作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础 angular 模板文件 在这个模板文件...,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件属性值或者是模板上数据通过模板表达式运算符进行计算...通过使用 $event 作为方法参数会将许多用不到模板信息传递到组件,导致我们仅仅是为了获取数据前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到)与组件(应用如何去处理用户数据)...子组件引入服务,从而同步获取到父组件修改服务数据信息 import { Component, OnInit } from '@angular/core'; // 引入服务 import

15.7K30

angular面试题及答案_angular面试

ngOninit:初始化指令或组件,angular第一次显示展示组件绑定属性调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...angular路由器使用base href 作为组件、模板基地址,开发期间,通常会在index.html所在目录启动服务器,所以这个目录就是根目录,所以可以index.html 顶部添加<base...是输入属性发生变化时候调用,并且ngOnInit是ngOnchanges执行之后才调用,而constructor是组件实例化时候就调用了,也就是说,constructor是取不到输入属性...ViewChild 用来从模板视图中获取匹配元素 父组件 ngAfterContentInit 生命周期钩子才能成功获取通过 ContentChild 查询元素 父组件...ngAfterViewInit 生命周期钩子才能成功获取通过 ViewChild 查询元素 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

10.8K120

ElementRef & TemplateRef & ViewContainerRef

今天在做ng项目,看着前人代码有 viewChild() 等关键字。...,我们可以通过ElementRef拿到native元素(浏览器也就是我们常说DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit...标签,用于保存客户端内容机制,该内容页面渲染时不被加载,但是可以在运行时被javascript解析,详情可以看 Template HTML TemplateRef // @angular...template 模板元素,通过 TemplateRef 实例,我们可以方便创建内嵌视图(Embedded Views),且可以轻松地访问到通过 ElementRef 封装 nativeElement...需要注意是组件视图中 template 模板元素,经过渲染后会被替换成 comment 元素。 ViewContainerRef:用于表示一个视图容器,可添加一个或多个视图。

1.2K20

Angular8稳定版修改概述

但这是如何工作? 基本上,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...这允许现代用户代理和旧用户代理经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...Bazel可作为选择加入,预计将包含@angular/cli第9版。...从现在它已从包列表删除。 配置ViewChild / ContentChild查询时间 使用此功能时,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。...它们将在变更检测运行解析。 需要注意是,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。 添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。

4.5K20

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

Angular开发实践(六):服务端渲染》这篇文章最后,我们也提到了服务端渲染需要牢记几件事件,其中就包括不要使用window、 document、 navigator等浏览器特有的类型以及直接操作...通过Renderer2设置divcss样式background-color } } 获取组件div Angular应用不应该通过原生 API 或者 jQuery 来直接获取DOM元素...console.log('DIVid:' + this.demoDiv.nativeElement.id); // DIVid:demoDiv } 组件类,我们通过 @ViewChild 获取到包装有...操作组件div 在上面通过几种方式获取到 div DOM 对象,那么我们要如果对它进行操作呢(设置样式、属性、插入子元素等)?通过原始API 或者 jQuery 肯定是不允许了。...这样我们就引出Angular抽象类 Renderer2 来对元素进行设置样式、属性、插入子元素等操作。

2.6K90

Angular 动态创建组件

本文我们将介绍 Angular 如何动态创建组件。...我们自定义组件最终是一个实际 DOM 元素,因此如果我们需要在页面插入该元素,我们就需要考虑在哪里放置该元素。 创建组件容器 Angular 中放置组件地方称为容器。...AppComponent 组件,我们可以通过 ViewChild 装饰器来获取视图中模板元素,如果没有指定第二个查询参数,则默认返回 ElementRef 实例,但这个示例,我们需要获取 ViewContainerRef...根据以上需求,更新代码如下: import { Component, ViewChild, ViewContainerRef } from '@angular/core'; @Component(...对于列表声明每个组件,Angular 将会创建对应一个 ComponentFactory 对象,并将其存储 ComponentFactoryResolver 对象

3.6K10

Angular ElementRef 简介

通过 ElementRef 我们就可以封装不同平台下视图层 native 元素 (浏览器环境,native 元素通常是指 DOM 元素),最后借助于 Angular 提供强大依赖注入特性,我们就可以轻松地访问到...我们先来介绍一下整体需求,我们想在页面成功渲染,获取页面 div 元素,并改变该 div 元素背景颜色。...首先我们要先获取 div 元素文中 “ElementRef 作用” 部分,我们已经提到可以利用 Angular 提供强大依赖注入特性,获取封装 native 元素。...不过我们后面也会有专门文章,详细分析一下 Angular 组件生命周期。成功取到 div 元素,就剩下事情就好办了,直接通过 style 对象设置元素背景颜色。...我们看到设置 div 元素背景,我们是默认应用运行环境是浏览器。前面已经介绍了,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

1.6K60

Angular ViewChild和ViewChildren

ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配元素ViewChild 是属性装饰器,用来从模板视图中获取匹配元素。...视图查询 ngAfterViewInit 钩子函数调用前完成,因此 ngAfterViewInit 钩子函数,就能正常获取查询元素。...我们通过 ViewChild 装饰器来获取 AuthRememberComponent 组件,此外我们 ngAfterContentInit 生命周期钩子重新设置天数。...组件类,使用 ViewChild 装饰器来获取邮箱输入框元素引用: @ViewChild('email') email: ElementRef; 最后 ngAfterViewInit 生命周期钩子输出...nativeElement 属性,你会发现该属性对应值是原生 DOM 元素,因此我们可以 ngAfterViewInit 生命周期钩子执行某些 DOM 操作: ngAfterViewInit(

2.7K20

angular框架如何实现父子组件传值、非父子组件传值

文章目录 1.理解父子组件、非父子组件 2.父组件给子组件传值- -@input 3.父组件通过@ViewChild主动获取子组件数据和方法 4.非父子组件如何传递数据 1.理解父子组件、非父子组件...看看操作步骤: 父组件给子组件HTML传入“msg”信息: 假设将shopping组件嵌入到news组件,则shopping是子组件 下面给子组件通过“模板属性”方式传递数据: <app-shopping...3.父组件通过@ViewChild主动获取子组件数据和方法 angular也提供了一个@Output修饰器来实现子组件给父组件传值,但是这个方法是较复杂,我们使用另一种@ViewChild方法来实现...@viewChild("msg") msg:any; } 下面就可以使用msg来调用子组件通过msg传过来数据 父组件通过msg调用子组件数据即可 下面看实际操作: 第一步:引入子组件命令声明模板变量...4.非父子组件如何传递数据 现在我知道有三种方法: cookie:只要在一个组件ts文件设置了cookie,则其他组件也可以读取cookie键值对。

1.5K20

反思录:Angular实现svg和png图片下载

我经常思考,面临一个不确定问题时,以往经验究竟有无辅助作用?如果把经验遗忘会产生何种程度影响?在上下求索未果之后,如何找回曾经感觉,恰若灵光一现?...接下来要解决就是如何在component引用页面上svg元素并将它转化成png格式图片。 svg和png图片转换和下载 1....获取元素 Angular中提供一种叫做ViewChild注解,可以帮助我们引用到页面svg元素,此处就是#template....图片转换 有了svg元素,接下来需要考虑如何对其编程。svg和html浏览器内存中都是以DOM树形式存在,所以想要对svg进行编程,就得利用svgDOM interface....解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新AngularChange detection需要时间完成刷新,所以有很短时间延迟[2]。

2.6K40

(转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 如何使用。...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件(译者注:Angular 内置 ControlValueAccessor): Accessor Form Element...,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...jQuery 方法原生 DOM 元素上创建一个 slider 控件,然后使用 widget 属性引用这个控件。

3.7K20

【译】Angular,向子组件传值5种方式

angularJs项目代码时,第一个要想可能是:我如何向周围传值。...本文,让我们跟随 accompanying demo app  示例来阐述下面5个技术: @Input来响应变化值 @ViewChild设置属性 services中使用BehaviorSubjects...只需要添加input 装饰器到相应属性,如下: @Input() price:number; 模板文件,它只是一个属性,你可以用  [ ] 来绑定它值,也可以传入静态值。...ViewChild 使用ViewChild,你可以操作子组件内属性以及方法。动态插入组件或元素时,你可以通过子组件类或模板引用变量方式,来直接引用子组件,这技术就会得心应手。...要使用ViewChild,需要传入子组件类或是模板引用变量,这样父组件内轻易得到属性指向子组件。

2K20

Ionic 2 应用剖析0 开始之前1 创建一个新Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

根据功能组织代码想法不是Angular 2 & Ionic 2 特权,事实上人们Ionic 1使用和倡导基于特征方式,只是大多数人没那样做(趋势是很难打破)。...通过Angular 2 工作方式,默认就使用基于特征结构,因此不难推行这种结构。 index.html 已经是惯例了,浏览器第一个打开文件就是 index.html 。...我们从Angular 2导入 Component 和 ViewChild 。 Component 几乎无处不在,因为我们用于创建组件, ViewChild 用于获取组件中元素定义。...所以,menu将使用作为它主要内容。这里我们设置root属性为我们定义(app.ts)rootPage。...(根组件通过openPage方法设置),我们没用通过navigation stack导航到这个页面。

4.4K50

angular知识点梳理第三篇-组件

声明一个变量 【parent.component.ts】 第二步:父组件html视图层文件引入子组件 【parent.component.html】 第三步:子组件ts文件中使用@Input...this传递 【parent.component.html子组件中进行@Input进行接收即可 【children.component.html】 子组件传值(函数)给父组件 方案一 通过viewchild...:父组件ts文件引入viewchild模块 【parent.component.ts】 方案二:通过@Output触发父组件方法 第一步:子组件ts文件引入angular核心模块output...ts文件中进行函数和数据执行 【parent.component.ts】 写到后面 前文回顾 第一篇时候我们对angular进行了一个简单介绍,主要是认识了angular以及如何创建一个angular...子组件传值(函数)给父组件 方案一 通过viewchild进行节点获取 第一步:父组件引入子组件地方添加节点值 【parent.component.html】 <!

2.1K10
领券