コンポーネントクラス自体からコンポーネントの「コンテンツ」にアクセスするにはどうすればよいですか？
私はこのようなことをしたいと思います：
<upper>my text to transform to upper case</upper>
@Input属性に使用するように、コンポーネント内のコンテンツまたは上位タグを取得するにはどうすればよいですか？
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
@Input
content: String;
}
PS：大文字の変換にパイプを使用できることは知っています。これは例にすぎません。大文字のコンポーネントを作成したくありません。コンポーネントのクラスからコンポーネントのコンテンツにアクセスする方法を知っているだけです。
@ContentChildこれにはデコレーターを利用する必要があります。
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
@Input
content: String;
@ContentChild(...)
element: any;
}
編集する
あなたの問題をもう少し調査しました@ContentChildが、ルートの内部DOM要素がないため、ここでは使用できません。
DOMを直接活用する必要があります。これが実用的な解決策です：
@Component({
selector: 'upper',
template: `<ng-content></ng-content>`
})
export class UpperComponent {
constructor(private elt:ElementRef, private renderer:Renderer) {
}
ngAfterViewInit() {
var textNode = this.elt.nativeElement.childNodes[0];
var textInput = textNode.nodeValue;
this.renderer.setText(textNode, textInput.toUpperCase());
}
}
詳細については、このplunkrを参照してください：https ://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加