Angular2 Text durch Komponenten ersetzen

Question

Ich zeige eine Textzeichenfolge in meiner Komponentenvorlage an.

<p>{{ text }}</p> 

Nun, wenn ich das Wort „Candy“ von „apple“ in diesem Text automatisch, das einfach sein würde, mit beispielsweise einem Rohr ersetzen wollte:

<p>{{ text | replaceCandy }}</p> 

beginnen jedoch Schwierigkeiten, wenn ich möchte "Süßigkeiten" durch einen Hyperlink (HTML) ersetzen. Der HTML-Code funktioniert nur bei Verwendung wie folgt:

<p [innerHTML]="(text | replaceCandy)"></p> 

Dies ist bereits ein Problem, weil die Textvariable möglicherweise unsicher ist. Das ist also nicht die beste Option.

Es wird noch komplizierter, wenn ich "Süßigkeiten" durch eine benutzerdefinierte Komponente ersetzen wollte, die ich gemacht habe: AppleComponent. Ersetzen der Zeichenfolge "Süßigkeiten" durch "" funktioniert nicht. Die Ausgabe ist leer.

Zusätzliche Informationen: Ich benutze eine Pipe, weil es einfach zu verwenden ist. Eigentlich keine Notwendigkeit. Ich suche nur nach der besten Lösung für das Problem.

Answer 1

Wenn Sie den Textwert eingegeben werden, um eine benutzerdefinierte Komponente möchten, können Sie einen Eingabewert auf der benutzerdefinierten Komponente mit Syntax wie diese

export class CustomComponent { 
    @Input() inputText: string; 

erklären dann die Komponente in der ursprünglichen HTML verwenden, und databind der Wert unter Verwendung von Attribut-Syntax:

<p><custom-component [inputText]="text"></custom-component></p> 

Answer 2

Sie könnten ein ngSwitch statement verwenden, um zwischen verschiedenen Komponenten zu wählen:

<input type="text" [(ngModel)]="text" /> 
<span [ngSwitch]="text"> 
    <apple *ngSwitchCase="'apple'"></apple> 
    <orange *ngSwitchCase="'orange'"></orange> 
    <div *ngSwitchDefault>found no match</div> 
</span> 

Wenn textapple ist, wird die Komponente apple angezeigt. Wenn textorange ist, wird die Komponente orange angezeigt.