Question

使用Angular 2，RC6，我需要创建一个函数来引用它触发的模板中的元素。例如，如果我有<div>并点击它，附加的函数会告诉我<div>。

这是一个＆＃34;破坏＆＃34;示例（伪代码）：

@Component({
    selector: 'example',
    template: `
        <div id="example" (click)="myExampleFunction(this, $event)">
            Some text
        </div>
    `
})
export class ExampleComponent {
    public myExampleFunction(el: Element, ev: Event): void {
        console.info('Element', el);
        console.info('Event', ev);
    }
}

此示例无效，因为this参数返回整个ExampleComponent而不是<div>。但$event参数按预期工作。

Angular引入了@ViewChild的概念，这可能适用于此。但是，我真的更喜欢保持流程简单，没有多余的代码。我需要的只是引用的元素。我怎么能这样做？

Answer 1

您可以使用

<div id="example" #example (click)="myExampleFunction(example, $event)">

或

<div id="example" (click)="myExampleFunction($event)">

export class ExampleComponent {
    public myExampleFunction(ev: Event): void {
        console.info('Element', ev.target);
        console.info('Event', ev);
    }
}

Answer 2

您可以查看$event srcElement，其中包含您要查找的div。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
   <div id="example" (click)="myExampleFunction($event)">
            Some text
        </div>
  `
})
export class AppComponent { 

  public myExampleFunction(ev: Event): void {
       console.log(ev);
       console.info('Event', ev.srcElement);
    }
}

// Result
    <div id="example">
                Some text
            </div>

这是PLunker!!

希望这会有所帮助!!

Angular 2，RC6 - 引用不带@ViewChild的HTML元素

2 个答案: