Angular 2使用elementref获取多个元素

我有一个自定义指令，我试图在两个元素上使用它，这样我就可以启用

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>

单击我进行编辑
单击我以使用相同的指令进行编辑
按我以启用编辑

它适用于第一个元素，而不是第二个元素。这是一个带我的装置的小东西

---

任何帮助都会很好，谢谢

使用

@ViewChildren

：

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

---

使用

@ViewChildren

：

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

---

使用您自己的指令[contentEditable]。。是更好的解决方案：）

从'@angular/core'导入{Component，NgModule，ViewChild}
从“@angular/platform browser”导入{BrowserModule}
从“/EditDirective”导入{EditDirective}
@组成部分({
选择器：“我的应用程序”，
模板：`
单击我进行编辑

单击我以使用相同的指令进行编辑

按我以启用编辑
`,
})
导出类应用程序{
isEditable:布尔值=false；
编辑（）{
this.isEditable=true；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App，EditDirective]，
引导：[应用程序]
})
导出类AppModule{}

使用您自己的指令[contentEditable]。。是更好的解决方案：）

从'@angular/core'导入{Component，NgModule，ViewChild}
从“@angular/platform browser”导入{BrowserModule}
从“/EditDirective”导入{EditDirective}
@组成部分({
选择器：“我的应用程序”，
模板：`
单击我进行编辑

单击我以使用相同的指令进行编辑

按我以启用编辑
`,
})
导出类应用程序{
isEditable:布尔值=false；
编辑（）{
this.isEditable=true；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App，EditDirective]，
引导：[应用程序]
})
导出类AppModule{}