2016-12-13 3 views
-1

편집 버튼을 선택하고 편집 할 설명의 설명에 중점을 두는 업데이트 유형 기능을 만들려고합니다. 그러나 나는 편집하고 싶은 특정 게시물의 구체적인 설명을 얻는 방법을 이해하지 못한다. 여기에 ...각도 2 초점 지시문 문제

<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

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

+0

당신의'isEditable'과'inputFocused' 변수는 비 디스크입니다. 차별적 인. – silentsod

+0

네,하지만 100 개의 코멘트가 있다고 말하면, 편집하고 싶은 코멘트를 구별하기 위해 100 개의 부울을 생성하고 싶지는 않습니다. 내가 할 수있는'this.comment.focus' 유형의 설정이 있습니까? – Bean0341

+1

이것을 확인하십시오 https://plnkr.co/edit/yrDLST1teuJCopnPafZR?p=preview – yurzui

답변

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

+0

답변을 주셔서 감사합니다. Michael, @yurzui comment 및 plunkr은 내 애플리케이션을 이미 설정 한 방법입니다. 나는 그의 대답과 함께 갔다. 귀하의 답변도 잘 작동하지만 약간의 재 작업이 필요합니다. +1 노력에 감사드립니다! – Bean0341

+0

문제 없습니다. @ yurzi의 솔루션 역시 좋은 접근 방법입니다. –