angular4获得焦点事件_Angular 4 文本框自动获取焦点二

Angular是不推荐直接通过DOM操作获取元素的,要操作元素就通过@ViewChild装饰器。

在HTML中对元素添加引用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');

}

如果使用实现AfterViewInit,OnDestroy,那么你需要实现接口方法

export class ModalDirective implements AfterViewInit,OnDestroy {

ngAfterViewInit() {

}

ngOnDestroy() {

}

}

不然会报错

Implement lifecycle hook interface AfterViewInit for method ngAfterViewInit

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

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

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

相关文章

Bootstrap源码解读之栅格化篇

本文纯属自己研究所写笔记,如果有错误还请多多指教提出 版心(container) 版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白。 各尺寸下版心宽度如下表: 屏幕设备版心宽度ma…

EasyCriteria 2.0 – JPA标准应该很容易

在今天的帖子中,我们将看到名为EasyCriteria的框架的新版本。 在这篇文章的结尾,我们将在博客中看到这里的内容。 不幸的是,JPA标准存在一个巨大的问题,即冗长。 为什么不变得更简单? 像这样认为EasyCriteria框架已经诞…

[BZOJ2095][Poi2010]Bridges 最大流(混合图欧拉回路)

2095: [Poi2010]Bridges Time Limit: 10 Sec Memory Limit: 259 MBDescription YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛…

excel和python建模_利用Excel学习Python:准备篇

写在前面这个系列我们要利用Excel的知识,学会用python进行数据分析,如果你精通Excel想要用python提高数据分析效率,那么这个系列你来对了,如果你已经是python大神,想要建模/算法等高级技巧的,这个系列可能不…

故障公告:IIS应用程序池停止工作造成博客站点无法访问

非常抱歉,今天凌晨博客站点负载均衡中所有3台服务器的IIS应用程序池突然停止工作,造成 1:20-7:45 左右博客站点无法正常访问,由此给您带来很大的麻烦,请您谅解。 服务器操作系统是 Windows Server 2016,对应的 IIS 错误…

前端HTML以及HTML5(基本标签)

前面一章介绍了一下前端的发展,这章简单介绍一下html的发展以及基本的标签。 一、HTML的发展史 1、概念 超文本标记语言(HyperText Markup Language,简称HTML)是为 [ 网页创建和其他可在浏览器中看到的信息 ] 设计的一种标记语言…

方法内联在JVM中有多积极?

IntelliJ IDEA中使用Ctrl Alt M 提取方法 。 Ctrl Alt M。 这就像选择一段代码并按此组合一样简单。 Eclipse也有它 。 我讨厌冗长的方法。 对于我来说,闻起来太久了: public void processOnEndOfDay(Contract c) {if (DateUtils.addDays(c.getCrea…

Python正则表达式基础

1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分强大。得益于这一点,在提供了正则表…

hexdump mysql_linux下mysql数据库定时备份

备份操作命令:mysqldump -uroot --default-character-setutf8 --hex-blob -p123456 test_oa > /usr/software/data_backup/mysql_backup/test.sql以下是完整脚本,加--default-character-setutf8 --hex-blob 防乱码发生。#!/bin/bashdatabasestestus…

新建一个页面

今天我刚好要做一个单页面来展示某些东西。 就一起来看看吧&#xff0c;初学者写的不好请自闭双眼。 先上代码吧&#xff0c;大家看看有什么需要修改的地方。 1 <!DOCTYPE html>2 <html lang"en">3 4 <head>5 <meta charset"UTF-8&q…

Java并发:隐藏线程死锁

大多数Java程序员熟悉Java线程死锁概念。 它本质上涉及2个线程&#xff0c;它们彼此永远等待。 这种情况通常是平面&#xff08;同步&#xff09;或ReentrantLock&#xff08;读或写&#xff09;锁排序问题的结果。 Found one Java-level deadlock:"pool-1-thread-2"…

vue中使用axios发送请求

我们知道&#xff0c;vue2.0以后&#xff0c;vue就不再对vue-resource进行更新&#xff0c;而是推荐axios&#xff0c;而大型项目都会使用 Vuex 来管理数据&#xff0c;所以这篇博客将结合两者来发送请求 1.安装axios cnpm i axios -S 2.方案一&#xff1a;修改原型链 首先&…

django缓存

由于Django是动态网站&#xff0c;所有每次请求均会去数据进行相应的操作&#xff0c;当程序访问量大时&#xff0c;耗时必然会更加明显&#xff0c;最简单解决方式是使用&#xff1a;缓存&#xff0c;缓存将一个某个views的返回值保存至内存或者memcache中&#xff0c;5分钟内…

linux 输入法成繁体字_寻找Ubuntu中繁体字输入法

当客户来自港台地区时&#xff0c;英文和繁体字就成了交流的主要工具。windows下我们有搜狗输入法可以切换简体与繁体&#xff0c;那么Ubuntu下怎么办&#xff1f;這是我第一次考慮這個問題&#xff0c;在我的印象裏Linux下的中文輸入法還不是那麼完善&#xff0c;所以我進行了…

vue跨域解决方法

vue跨域解决方法 vue项目中&#xff0c;前端与后台进行数据请求或者提交的时候&#xff0c;如果后台没有设置跨域&#xff0c;前端本地调试代码的时候就会报“No Access-Control-Allow-Origin header is present on the requested resource.” 这种跨域错误。 要想本地正常的调…

Spring 3.2的REST异常处理

1.概述 本文将重点介绍如何使用REST API的Spring实现异常处理 。 我们将介绍在Spring 3.2之前可用的较旧的解决方案&#xff0c;然后是对Spring 3.2的新支持。 本文的主要目的是展示如何最好地将应用程序中的异常映射到HTTP状态代码。 哪种状态代码不适合本文中的哪种情况&…

kali中常用的ctf工具

exiftool:查看图片的exif信息。 pngcheck:修复被破坏的png图片 pngtools:深入研究png文件的数据 steganographic&#xff1a;用来提取图片中的隐藏信息 stegsolve.jar:kali中没有该工具&#xff0c;但是可以自己下 gimp:提供了转换各类图像文件可视化数据的功能&#xff0c;还可…

linux将所有文件生成lst_Linux自定义repo文件

repo文件简介repo文件是CentOS中yum源(软件仓库)的配置文件&#xff0c;通常一个repo文件定义了一个或者多个软件仓库的细节内容&#xff0c;例如我们将从哪里下载需要安装或者升级的软件包&#xff0c;repo文件中的设置内容将被yum读取和应用yum原理YUM的工作原理并不复杂&…

使用JUnit规则测试预期的异常

这篇文章展示了如何使用JUnit测试预期的异常。 让我们从我们要测试的以下类开始&#xff1a; public class Person {private final String name;private final int age;/*** Creates a person with the specified name and age.** param name the name* param age the age* th…

CSS盒子模型之详解

前言&#xff1a; 盒子模型是css中最核心的基础知识&#xff0c;理解了这个重要的概念才能更好的排版&#xff0c;进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) &#xff0c;包含了元素内容&#xff08;content&#xff09;、内边距&#…