Question

我有一个组件，它将用户输入（文本）发送到服务并接收此文本的丰富版本。富含意味着某些词语充满了信息。服务器给我原始文本和丰富的子字符串列表，每个子字符串包含原始文本的开始和结束索引，因此我可以在原始文本中找到它们。

现在我想将带有突出显示的短语的原始文本显示为带有弹出窗口的按钮，其中显示了附加信息。

在Angular 1中，我有一个指令，我在其中动态创建模板，迭代找到的短语，并在非富集短语之间为每个短语创建一个新按钮。使用$ compile（），它们被正确显示。按钮本身就是一个指令，因此代码如下所示：

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

到目前为止一直很好，但我还没有找到如何在Angular 2中的文本中动态添加组件的方法。

我创建了一个生成HTML的组件，然后将this.elementRef.nativeElement.appendChild(generated))添加到Component的元素中。创建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\'');

但这些行在运行时发出错误：

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

如何通过数据绑定任意将我的组件添加到另一个组件中？

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);
    }
}

然后你有一个enriched-phrases组件，其中有一个模板，其中包含ngIf中的原始文本，在你的后端检索丰富文本并将其存储在数组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指令，它将重复您拥有的“短语”。

注意：我还没有真正使用过打字稿，因此可能存在一些语法问题，但这是我试图解释的要点。

在另一个组件中动态添加组件

1 个答案: