Angular 2, RC6 - 在没有 @ViewChild 的情况下引用 HTML 元素

Question

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

这是一个 "broken" 示例（伪代码）：

@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 参数 returns 整个 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 元素

Angular 2, RC6 - Referencing an HTML element without @ViewChild

angular-template

angular