角2のフォーカス指示命令の問題

Question

私は編集ボタンを選択する更新タイプの関数を作成しようとしており、編集するコメントの説明に焦点を当てています。しかし、私は編集したい特定の投稿の具体的な説明を取得する方法を理解していません。ここでは...

<div> 
     <p [contentEditable]="isEditable" [focus]="inputFocused">Test 1</p> 
     <button (click)="Edit()">edit 1</button> 
    </div> 
    <div> 
     <p [contentEditable]="isEditable" [focus]="inputFocused">Test 2</p> 
     <button (click)="Edit()">edit 2</button> 
    </div> 

htmlと私が達成しようとしているものの概念の一部であり、ここでそのIを受け入れるまで、私は開いていたすべてのコードディレクティブでplunkerとすべてhttps://plnkr.co/edit/HSuLScvffC0G5sfMHjJ5?p=preview

です間違った方法でこれに近づいている可能性があります。どんな方向にも大いに感謝します。

Answer 1

ウェブコンポーネントのパワーが救助になると思います。代わりにコメントコンポーネントを作成し、そこに編集ロジックをカプセル化：

app.ts

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {MyComment} from './comment.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <ul *ngFor="let comment of comments"> 
     <li> 
      <my-comment [comment]="comment"></my-comment> 
     </li> 
     </ul> 
    </div> 
    `, 
}) 
export class App { 
private comments = ['Comment 1', 'Comment 2']; 
} 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [App, MyComment], 
    bootstrap: [App] 
}) 
export class AppModule {} 

comment.component.ts

import {Component, Input, ViewChild, OnInit} from '@angular/core' 

@Component({ 
    selector: 'my-comment', 
    template: ` 
    <div> 
     <p #text>{{comment}}</p> 
     <button (click)="Edit()">Edit</button> 
    </div> 
    `, 
}) 
export class MyComment { 
    @Input() comment: string; 
    @ViewChild('text') paragraph: HtmlElement; 

    Edit() { 
    let element = this.paragraph.nativeElement; 
    element.contentEditable = true; 
    element.focus(); 
    } 
} 

ここで働いplunker：https://plnkr.co/edit/G8s8tw2R2zyrJaD1NGW0?p=preview