Angular 2 用elementref获取多个元素

Question

我有一个自定义指令，我正在尝试在两个元素上使用它，这样我就可以启用contenteditable = 'true'我已经试过两次像这样调用指令...

    <div>
      <p myEdit>click me to edit</p>
      <p myEdit>click me to edit with same directive</p>
      <button (click)="Edit()">Press me to enable editing</button>
    </div>

它适用于第一个 <p> 元素而不是第二个。这是我的设置 https://plnkr.co/edit/eLIOAzt4BHA84DEAPTRX?p=preview

任何帮助都会很棒，谢谢！

Answer 1

使用@ViewChildren:

export class App {
  @ViewChildren(EditDirective) vc:EditDirective;
  constructor() {}
  Edit(){
    this.vc.map(c => c.Edit())
  }
}

https://plnkr.co/edit/KuICFo5888bCxmZG5D1O?p=preview

Answer 2

改用您自己的指令 [contentEditable] .. 是更好的解决方案:)

import {Component, NgModule, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {EditDirective} from './editDirective'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <p [contentEditable]="isEditable">click me to edit</p>
      <p [contentEditable]="isEditable">click me to edit with same directive</p>
      <button (click)="Edit()">Press me to enable editing</button>
    </div>
  `,
})
export class App {

isEditable: boolean = false;

Edit() {
   this.isEditable = true;
}

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, EditDirective ],
  bootstrap: [ App ]

})
export class AppModule {}

Angular 2 用elementref获取多个元素

Angular 2 Get multiple elements with elementref

angular2-directives

angular