Angular 4 文本框自动获取焦点二
来源:互联网 发布:php 工作日志管理系统 编辑:程序博客网 时间:2024/06/06 00:47
Angular是不推荐直接通过DOM操作获取元素的,要操作元素就通过@ViewChild装饰器。
在HTML中对元素添加引用myInput:
<input type="text" #myInput>
在ts中可以通过ViewChild获取指定元素的引用:
import { ViewChild } from '@angular/core';@ViewChild('myInput') input;
获取到对应元素的引用后,你想添加焦点,如下:
this.input.nativeElement.focus()
nativeElement获取的是原始DOM元素,至于你想在哪里自动获取焦点,就看你的业务逻辑了,可以配合Angular对应的生命周期使用。
这是在segmentfault上别人给我的答案。
我的业务需求是页面加载完毕就立马给input获取焦点;
所以用到了
ngAfterViewInit():void {
this.renderer.invokeElementMethod(
this.infocus.nativeElement,'focus');
}
export class ModalDirective implements AfterViewInit, OnDestroy { ngAfterViewInit() { } ngOnDestroy() { }}
不然会报错
Implement lifecycle hook interface AfterViewInit for method ngAfterViewInit
阅读全文
0 0
- Angular 4 文本框自动获取焦点二
- Angular 4 文本框自动获取焦点
- 防止文本框自动获取焦点
- WPF让一个文本框自动获取焦点:
- 文本框自动获得焦点
- Android WebView 文本框获取焦点后自动放大的解决方案
- Android WebView 文本框获取焦点后自动放大有关问题
- 解决 Android WebView 文本框获取焦点后自动放大问题
- AS文本框焦点获取
- js文本框获取焦点
- 文本框如何获取焦点
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
- 文本框特效:获取焦点时自动清除默认文本 失去焦点重新显示默认文字
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
- 输入文本框,焦点自动跳转下一个文本框
- js获取文本框输入焦点
- input文本框获取/失去焦点
- 5基于opencv的非线性滤波(中值滤波_双边滤波)
- Sigreturn Oriented Programming (SROP) Attack攻击原理
- Elasticsearch(五)elasticsearch高亮搜索
- 高效计算一个字符串中某个字母的最大连数
- java数据结构和算法
- Angular 4 文本框自动获取焦点二
- 手把手编写PHP MVC框架实例教程
- MongoDB java[CRUD](四)
- mssql数据迁移到mysql
- iOS 11 NSPhotoLibraryAddUsageDescription 闪退
- 【OpenCV】图像分割
- 第8代CPU i5-8250U 电脑安装核显 WIN7X64位驱动
- 《图解HTTP》读书笔记(11)第11章Web的攻击技术(关键词:HTTP/)
- CNN和图像的一些概念解释