角度エラーセレクタが要素と一致しません

Question

角度5のコンポーネントでは、エラーが発生しています：Error: The selector "#person-component" did not match any elements.問題は、ページを検査するときに、要素が正しいIDと共にそこにあることです。また、ルータのリンクからページをロードすると、エラーが発生したURLに直接移動したときだけ動作します。

見つからない要素が別のコンポーネントによって追加されていて、親コンポーネントを含むモジュールに追加しようとしています。明らかに、主なコンポーネントのリンクを使用すると、何か違うことが起こっていますが、それは何か分かりません。失敗した行（下）はngAfterContentInitにあるので、なぜ要素が見つからないのか分かりません。

これは、コンポーネントに失敗のコードです：

ngAfterContentInit() { 
    ... 
    const container = this.renderer.selectRootElement('#person-component'); 
    this.renderer.setAttribute(container, 'id', htmlId); 
    ... 
    } 

は、ここでそれが追加されています方法です。

主なコンポーネントのHTML：

<employee-component> ... </employee-component> 

サブコンポーネント：私はページを閲覧する際

@Component({ 
... 
selector: 'employee-component', 
template: ` 
    <div id="person-component"></div> 
`, 
}) 

ここで要素だ：

<div id="person-component"></div> 

Answer 1

Demo

使用ngAfterViewInit代わりのngAfterContentInit：

ngAfterViewInit() { 

    const container = this.r.selectRootElement('#person-component'); 
    this.renderer.setAttribute(container, 'id', htmlId); 

    } 

我々がロードされるように<ng-content>に投影コンテンツを待つngAfterContentInitを使用しています。