각도 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로 내가 달성하기 위해 노력하고 무엇의 개념의 일부이며, 여기에 내가 동의에 내가 문을 열어주는 말들 모든 코드 지시어와 plunker 모든 https://plnkr.co/edit/HSuLScvffC0G5sfMHjJ5?p=preview

입니다 잘못된 방향으로 접근 할 수 있습니다. 어떤 방향이라면 크게 감사하겠습니다.

Answer 1

웹 구성 요소의 힘이 구조에 올 수 있다고 생각합니다. 이 편집 논리를 대신 주석 구성 요소를 만들고 캡슐화 :

이

//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을 app.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