在 Angular 2 中使用 Typescript 选择输入中的文本

2023-12-08

我正在尝试准确地执行中所描述的操作这个帖子,但是在 Angular2 中。

基本上都是使用javascript函数.setSelectionRange(start, end);在用户单击触发器后的输入中。我找不到任何方法来使用 Typescript 复制此行为。

提前致谢。


我找不到任何方法来使用 Typescript 复制此行为。

TypeScript 只是 JavaScript。我怀疑你的意思是Angular2(那个帖子是 Angular1)。

Angular2

您需要掌握 dom 元素(这似乎是您正在努力解决的问题)。在你的控制器中你需要注入ElementRef。例如。@Inject(ElementRef) elementRef: ElementRef,

一旦你拥有了元素,你就可以遍历它并执行你需要做的任何 dom 访问/手动操作。

More

Docs : https://angular.io/docs/js/latest/api/core/ElementRef-class.html

Example

样本 :https://stackoverflow.com/a/32709672/390330

import {Component, ElementRef} from 'angular2/core';

@Component({
  selector:'display',
  template:`
  <input #myname (input) = "updateName(myname.value)"/>
  <p> My name : {{myName}}</p>
`
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {

  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 2 中使用 Typescript 选择输入中的文本 的相关文章

  • 更新项目时,NUMBER_VALUE 无法转换为字符串

    我在 DynamoDB 上遇到了这个奇怪的问题 我似乎无法更新项目 这是我的命令 TableName UserTable Key UID S h4XJj3YRxZiF7TDcGkxAhc UpdateExpression SET numRa
  • 如何在 Angular 2 中执行无限动画?

    基本上 我想利用 Angular 中的 web animations api polyfill 当前为 4 来对元素执行无限动画 让我们看一个基本的非角度示例 var ball document getElementById ball ba
  • 优雅地处理 AngularJS 错误:$injector:nomod 模块不可用

    我的角度应用程序依赖于第三方角度服务 var app angular module ninjaModule angular google analytics 只要我的广告拦截插件关闭 该应用程序就可以正常加载 然而 随着广告拦截器的角度抛出
  • Angular 8 输入验证仅接受数字

    我正在创建动态输入字段 它将接受所有类型值 我需要限制只输入数字 模板 tr tr
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • TypeScript 第 3 阶段字段装饰器

    我目前正在尝试将字段装饰器从实验性 TypeScript 更新到第 3 阶段 它所做的只是在字段值更新时发送通知 旧的实现如下所示 function watchChange
  • 如何让 vsCode 了解自动补全的深度依赖导入?

    我创建了多个角度库 让我可以使用一堆组件更快地创建网站 例如 sidenav 卡片 我创建了一个 超级库 来导入所有这些库 这样我就可以使用npm i myWebsiteBundle立即下载所有依赖项 我已将每个类似的插件列入白名单ng p
  • VSCode TypeScript 问题Matcher `$tsc-watch` 未观看

    我试图避免使用watch true in a tsconfig json配置 通过 VSCode 的任务 我正在使用基本问题匹配器 tsc watch但它没有启动tsc构建时处于监视模式 我正在添加gulp支持 我看到有gulp watch
  • 在具有多级分组的 HTML 表格中显示数据

    我必须通过使用 rowspan 进行分组来显示 HTML 表中的一些数据 下面是预期的 GUI 我有如下所示的 JSON 数据 JSON数据here https jsoneditoronline org id 1014438e5489485
  • 无法使用 Nest CLI 创建新项目

    我正在关注this https docs nestjs com first steps创建 Nest 项目的教程 我已经安装了Nest CLI使用这个命令 npm i g nestjs cli 我使用以下命令检查了本地安装的软件包列表 发现
  • 我如何在 AngularJS 中监听点击并按住的情况?

    我制作了一个时间计数器 您可以通过单击按钮来增加或减少时间 然而 我希望当我单击并按住按钮时 时间的价值会不断攀升 所以目前如果你看到我的Plunkr http plnkr co edit BxX9x5zYFMXVqt5JsN1F p pr
  • Angular 5 - 使用对象进行表单控制

    我目前正在开发一个由 Django 支持的 Angular 应用程序 该应用程序的一部分是它需要显示成员列表 成员数组看起来有点像这样 name John Smith id 3 score set name Jane Doe id 7 sc
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • 如何更改服务器端口3000?

    我刚刚结束了 Angular 2 的教程 我找不到将 localhost 端口从 3000 更改为 8000 的方法 在我的package json文件中有一行 start concurrent npm run tsc w npm run
  • 在“FormGroup”中预填充输入字段 - Angular2

    我正在使用 Angular2 反应形式 一切正常 直到我想在表单中的字段之一中显示预填充的值 设想 页面上有多个按钮 每个按钮都会打开一个表单 其中的字段如下 Name Email Message 产品代码 gt 此值应根据服务中的每个项目
  • 类型错误:无法读取未定义的属性“defaultPrevented”

    当我进行以下测试时 我收到此错误 it should call pauseAnimationInterval if in focus inject function SearchBoxData intervalManager timeout
  • 如何在 Angular 4 项目中使用 ActiveXObject

    我正在尝试使用 ActiveXObject 如下所示 getActiveXObject pdfCtrl return new ActiveXObject pdfCtrl checkPDF let plugin null if this ge
  • Angular 4 与 Webpack 2,动态加载脚本

    我刚刚在一个项目中尝试使用 Angular 4 和 Webpack 2 我试图在 ngOnInit 期间加载一些脚本 但遇到了一些问题 问题1 我的 ngOnInit 中有以下代码 System import node modules jq
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type

随机推荐

  • Playframework - Eclipse 无法检测到新模板[重复]

    这个问题在这里已经有答案了 可能的重复 如何让Eclipse看到Play中的变化 编译模板 我正在迈出 Play 的第一步 框架和我遇到了一些问题 我可以毫无问题地创建和消除一个项目 现在 如果我添加一个新视图 例如 sometest sc
  • 登录 Azure Web 应用程序失败,并显示“AADSTS50079:用户需要使用多重身份验证”

    我们有一个 Azure Web 应用程序 它通过 Azure 多因素身份验证进行身份验证并访问 Graph API 和 Power BI 我们已经设置了 Azure 应用程序注册所需的权限 我们使用 Redis 缓存将令牌详细信息存储在 N
  • Yii 2.0 Restful Web 服务 API

    有人使用 Yii 2 0 beta 中集成的 RESTful Web 服务吗 官方的说明文档看起来很简单 但对我来说不起作用 我正在使用基本模板 使用 gii 模块创建一个简单的 类别 模型扩展ActiveRecord 然后我创建了Cate
  • Ansible:如何增加IP地址?

    我将一个变量传递给 Ansible extra vars lan 10 10 10 1 我现在需要增加这个 IP 地址 以便最后一个八位字节是 2所以它将等于10 10 10 2 在 Ansible 中如何实现这一点 从 Ansible 2
  • SQL WHERE 子句中的加号是什么意思 (WHERE + userName = SYSTEM_USER)

    我一直在试图找到 where 子句中加号的含义 有人对此有什么想法吗 被卡住了一点 查询本身非常简单 无论有或没有加号 其工作方式都类似 我想删除它 除非它的存在是有原因的 SELECT userID from tblUser WHERE
  • 如何根据嵌入数组过滤文档?

    审核后这一页 特别是这个查询 db scores find results elemMatch gte 80 lt 85 我使用了以下导入 import static com mongodb client model Filters and
  • 将重载指针传递给成员函数信号作为 QObject::connect 的参数[重复]

    这个问题在这里已经有答案了 在 Qt 中 如果信号没有过载 它可以像这样传递给 connect 方法 QObject connect comboBox QComboBox currentTextChanged gt void 但如果信号过载
  • 如何在Python中获取列表中出现频率最高的10个字符串

    我有一个包含 93 个不同字符串的列表 我需要找到 10 个最频繁出现的字符串 并且返回必须按从最频繁到最不频繁的顺序排列 mylist and beware twas all all and and and and and and and
  • 半正矢公式中的连接运算

    我正在 PHP 中实现 Haversine 公式 如下所示 result mysqli query mysqli SELECT 6371 acos cos radians lat cos radians latitude cos radia
  • 新添加的元素 $.each 和 events

    我已经阅读了很多帖子 each并新增了元素 事件附件 StackOverflow 上当前有关此主题的许多问题似乎对我不起作用 on 通常推荐 因为它允许我们附加新元素并且仍然维护单个事件侦听器 处理程序 在我当前的代码中 1 input t
  • 检测可穿戴设备何时与 Android 手机连接/断开连接

    Pebble 手表有一个 Intent 当 Pebble 连接 断开连接时会全局发送 这允许手机应用程序知道手表是否已连接 我已进行搜索 但无法找到有关 Android Wear 类似功能的信息 如何知道可穿戴设备是否已连接到手机 是否可以
  • 生成 Linkedin 访问令牌

    我一直在尝试使用简单的 REST 客户端以及 Mozilla 的 REST 插件 我正进入 状态 HTTP 1 1 401 未经授权 响应 正文中的 error unauthorized client error description 客
  • .NET,每分钟都有事件(每分钟)。计时器是最好的选择吗?

    我想使用 C 在 Windows 窗体应用程序中每分钟 按时钟 做一些事情 我只是想知道最好的方法是什么 我可以使用计时器并将其间隔设置为 60000 但要让它按分钟运行 我必须精确地按分钟启用它 这不太可行 我可以使用计时器并将其间隔设置
  • java.lang.SecurityException:权限拒绝:实现内容提供程序时打开提供程序

    我有问题 我尝试在我的消费者应用程序中实现内容提供程序 这是我来自应用程序 A 提供商 的 Android 清单
  • 以相反顺序打印 bash 参数

    我必须编写一个脚本 它将接受所有参数并反向打印它们 我已经提出了解决方案 但发现它非常糟糕 你有更聪明的主意吗 bin sh gt tekst txt for i in do echo i cat tekst txt gt temp mv
  • spring 3.0 MVC 似乎忽略 messages.properties

    Spring 3 0 MVC 首先 我没有找到任何有关 messages properties 的文档泉源我在各种论坛上发现了有关覆盖错误消息的所有内容 如果有人能参考 messages properties 的记录位置 那就太棒了 也许
  • MVC 3 和 DRY 自定义验证

    除非我遗漏了一些东西 这很有可能 否则在我看来 自定义验证总是违反 DRY 的 在我见过的所有示例中 即使使用 MVC 3 引入的全新非侵入式客户端验证 我们也必须为服务器端验证创建 NET 代码 并为客户端验证创建 jQuery 或 Ja
  • 我应该使用 HTML5 和 CSS3 吗?

    我是一个想要了解最新网络技术的人 但也很感激很多人仍然使用 IE6 7 8 如果一半内容在大多数浏览器上都无法显示 这是浪费代码 时间吗 这只是使用不同样式表的情况 还是只使用一个样式表 如果浏览器不支持文本阴影 那就搞砸了 他们可以看到它
  • 左填充猪中的一根绳子

    我想用 0 s 填充字符串数据类型字段 有什么办法可以做到这一点吗 我需要有固定长度 40 值 提前致谢 千里眼 零的数量需要根据剩余字符串的长度动态生成 所以我认为这在本地猪中是不可能的 这在 UDF 中是很有可能的 输入 txt 111
  • 在 Angular 2 中使用 Typescript 选择输入中的文本

    我正在尝试准确地执行中所描述的操作这个帖子 但是在 Angular2 中 基本上都是使用javascript函数 setSelectionRange start end 在用户单击触发器后的输入中 我找不到任何方法来使用 Typescrip