テンプレート他のコンポーネントの@Inputとして参照変数（）

Question

角度バージョン5.0.1

I成分

<div #content>some content</div> 
<some-component [content]="content"></some-component> 

にこのテンプレートを持って私は@Input()content介しSomeComponentに#content変数の参照を渡すしたいが変数の型がわからない。

私はウェブ上で検索するものから、私が

@Input() 
    component: ElementRef; 
    ngOnInit() { 
    console.log(this.component); // this prints the html element on console 
    console.log(this.component.nativeElement); // this prints undefined 
    } 

しかしthis.component.nativeElementが、this.componentが実際にあることが表示されますより多くのテストを行う未定義

でなかったElementRefように見えますネイティブエレメント

このような処理を行うと、実際の背景色は、私はこれは私が望んでいた道を働いてしまったものの

this.component.style.backgroundColor = 'red'; 

私はいくつかの質問にを持っている（私は実際に色をこのように変更するには面白くないよ、これは単なるテスト目的のためである）変更されました物事の仕組みをよりよく理解する。

1. は#contentネイティブの要素ではなくElementRefですか？
2. これは、参照変数を別のコンポーネントに渡す有効な角度の方法ですか？

この方法が間違っていると思われる場合、またはこれを行うより良い方法である場合は、有効な例を示してください。

Answer 1

ngOnInit()が早すぎる可能性があります。 ngAfterViewInit()はうまくいくかもしれない：

ngAfterViewInit() { 
    console.log(this.component); // this prints the html element on console 
    console.log(this.component.nativeElement); // this prints undefined 
} 

を#contentネイティブの要素ではなくElementRefですか？

#contentがプレーンエレメントの場合は、nativeElementです。
要素がコンポーネントまたはディレクティブをホストする場合、コンポーネントまたはディレクティブインスタンスが取得されます。