ng-Inhalte und Textbereich Kompatibilitätsproblem

Question

Ich habe eine benutzerdefinierten my-textarea Komponente mit der folgenden Vorlage:

<textarea> 
    <ng-content></ng-content> 
</textarea> 

Wenn ich die Komponente testen und versuchen, einen Text in ihm zu injizieren (wie wir mit einer normalen textarea tun html Element):

<my-textarea>some text</my-textarea> 

ich erhalte eine leere Komponente ohne die erwartete injiziert Schnur, some text.
Eine Idee, warum könnte das passieren? Ich habe versucht, das gleiche mit einem Knopf zu tun, und es funktioniert. (<button><ng-content></ng-content></button>).
Gibt es ein Kompatibilitätsproblem zwischen ng-content und textarea?
Dank

Answer 1

Sie können

Zum Beispiel die @Input() Anmerkung in Ihrem component.ts verwenden:

@Input() someText: string; 

Und jetzt können Sie "injizieren", um den Text, den Sie in der Komponente wollen wie :

<my-textarea [someText]="'sometext'"></my-textarea> 

Oder wenn Sie den Text in einer variablen in einer anderen Komponente haben

<my-textarea [someText]="someVariableWithText"></my-textarea> 

bearbeiten

app.component.ts

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
}) 
export class AppComponent { 
    text:string = "textToINsertINAnothercomponent"; 
} 

app.component.html

<my-textarea [textInCustom]="text"></my-textarea> 

my-texarea.component.ts:

@Component({ 
    selector: "my-textarea", 
    templateUrl: "app/my-textarea/my-textarea.component.html" 
}) 
export class ReviewList { 
    @Input() textInCustom: string; 
} 

mein -textarea.component.ht ml:

<text-area>{{textInCustom}}</text-area>