Winkelfehler Der Selektor hat keine Elemente gefunden

Question

In einer Angular 5-Komponente erhalte ich den Fehler: Error: The selector "#person-component" did not match any elements. Die Sache ist, dass wenn ich die Seite inspiziere, das Element dort mit der richtigen ID ist. Auch wenn ich die Seite von einem Router Link lade, funktioniert es, nur wenn ich direkt zu der URL navigiere, bekomme ich den Fehler.

Das Element, das nicht gefunden werden kann, wird von einer anderen Komponente hinzugefügt, und ich füge es in dem Modul hinzu, das die übergeordnete Komponente enthält. Offensichtlich passiert etwas anderes, wenn ich einen Link von der Hauptkomponente verwende, aber ich weiß nicht, was das ist. Die fehlerhafte Zeile (unten) befindet sich in ngAfterContentInit, daher weiß ich nicht, warum sie das Element nicht finden kann.

Dies ist der Code, der in der Komponente versagt hat:

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

Hier ist, wie es hinzugefügt werden wird.

Hauptkomponente HTML:

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

Subkomponente:

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

Hier ist das Element, wenn ich die Seite prüfen:

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

Answer 1

Demo

Verwendung ngAfterViewInit statt ngAfterContentInit:

ngAfterViewInit() { 

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

    } 

wir ngAfterContentInit verwenden für projizierte Inhalt in <ng-content> warten geladen werden.