다른 구성 요소 안에 동적으로 구성 요소를 추가하십시오.

Question

사용자 입력 (텍스트)을 서비스로 보내고이 텍스트의 풍성한 버전을받는 구성 요소가 있습니다. 일부 단어가 정보로 풍부 해지는 풍부한 의미. 서버는 원본 텍스트와 원본 텍스트의 시작 및 끝 인덱스가 각각있는 풍부한 하위 문자열 목록을 제공하므로 원래 텍스트에서 찾을 수 있습니다.

이제 강조 표시된 문구가 포함 된 원본 텍스트를 추가 정보가 표시되는 popover가있는 단추로 표시하려고합니다.

Angular 1에서 필자는 발견 된 구문을 반복적으로 템플릿을 만들고 비 - 풍부 구문 사이에 각각에 대해 새 단추를 만드는 지시문을 사용했습니다. $ compile()을 사용하면 올바르게 표시됩니다. 버튼 자체가 자신의 지시, 그래서 코드는 다음과 같이 보았다 : 지금까지

var newButton = angular.element(
     '<special-button ' + 
     'enriched="foundPhrases[' + i + ']" ' + 
     'title="\'' + original.substring(start, end)) + '\'" ' + 
     'position="\'bottom\'"' + 
     '></special-button>' 
    ); 

이 너무 좋아,하지만 난 어떻게 동적으로 각도 2.

텍스트 내에서 구성 요소를 추가하기에 방법을 발견하지 않았습니다

HTML을 생성 한 컴포넌트를 생성 한 다음 this.elementRef.nativeElement.appendChild(generated))을 추가하여 컴포넌트의 요소에 추가합니다.

let button = this.renderer.createElement(el, 'special-button'); 
button.setAttribute('[enriched]', 'foundPhrases[' + i + ']'); 
button.setAttribute('[title]', text.substring(start, end)); 
button.setAttribute('[position]', '\'bottom\''); 

그러나이 선이 런타임 오류를주고있다 : I 임의로와 다른 구성 요소에 내 구성 요소를 추가 할 수있는 방법

Error: Failed to execute 'setAttribute' on 'Element': 
    '[enriched]' is not a valid attribute name. 

을 generated을 생성하는 코드가 생성 특별한 버튼에 다음 줄을 포함 데이터 바인딩?

Answer 1

바라건대 이것은 다소 성취하기를 원하는 것입니다. 직접적인 DOM 조작은 Angular에서 좋은 연습이 아닙니다. 가정하자

는

export class Phrase { 
    enriched: string; 
    original: string; 
    constructor (_enriched: string, _original: string, start: int, end: int){ 
     this.enriched=_enriched; 
     this.original=_original.substring(start, end); 
    } 
} 

당신이 다음 후에 제거 될 것이다 ngIf에서 원본 텍스트를 포함하는 템플릿이있는 enriched-phrases 구성 요소가 "풍부한"되는 개체의 원본을 포함 어구 및 텍스트가 백엔드는 풍부한 텍스트를 검색하고 배열 foundPhrases

@Component({ 
    selector: 'enriched-phrases' 
    template: '<p *ngIf="!foundPhrases.length"/> '+ 
       '<special-button *ngIf="foundPhrases.length"'+ 
       ' *ngFor="let phrase of foundPhrases" [phrase]="phrase" '+ 
       '[position]="\'bottom\'"/>' 
}) 
export class EnrichedPhrasesComponent{ 
    onGotPhrases(foundPhrases: Array<Phrase>):void { 
     this.foundPhrases = foundPhrases; 
    } 
    foundPhrases: Array<Phrase>; 
    orginalText = "original text block"; 
} 

에 저장됩니다 그리고 당신은 special-button 요소에 대한 구성 요소를 가지고있다.

@Component({ 
    selector: 'special-button', 
    template: '<p>{{phrase.original}}</p><button>{{phrase.enriched}}</button>' 
} 

export class EnrichedPhraseDetail{ 
    @Input() 
    phrase: Phrase; 
    position: string; 

} 

그래서 특별한 버튼 구성 요소가 검색있어 후 데이터로 채워 그것은 많은 '문구'에 대한 반복 할 특별한 버튼에 ngFor 지시어를 사용하여 할 것입니다, 당신은.

참고 : 필자는 실제로 타이피 스크립트를 사용하지 않았으므로 거기에 구문 문제가있을 수 있지만 그게 내가 설명하려고했던 요지입니다.