angular 之手动触发组件事件

最新推荐文章于 2022-07-28 14:37:51 发布

原创最新推荐文章于 2022-07-28 14:37:51 发布 · 7.9k 阅读

2 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Angular应用中通过ViewChild获取元素引用，并利用Renderer2触发特定DOM事件，如聚焦输入框等。此方法适用于Angular应用中需要手动触发UI交互的情况。

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

业务场景：

点击按钮，调用方法，然后方法中需要触发其他元素的事件

比如，点击新增按钮然后某个文本框需要获得输入焦点

1、元素上定义模板变量

     <ion-input #myport
type="text" [(ngModel)]="port"></ion-input>

2\组件中使用注入元素。

  @ViewChild('mylog') logs: ElementRef;

3、方法中调用元素的事件。

   this.logs.nativeElement.focus();

----------------------------------------------

----------------------------------------------

 其他方法：

   angual2 使用 ，构造函数注入Renderer
   constructor(
public renderer: Renderer
) {

    this.renderer.1invokeElementMethod(this.logs.nativeElement, 'click', []);

   angular 4 已废除 该类，使用Renderer2

        constructor(
public renderer: Renderer2
) {

         this.renderer.listen()