Javascript 角度错误选择器与任何元素都不匹配

在Angular 5组件中，我得到了一个错误：

错误：选择器“#person组件”与任何元素都不匹配。

问题是，当我检查页面时，元素的ID是正确的。此外，当我从路由器链接加载页面时，它工作正常，只有当我直接导航到URL时，我才会得到错误

它找不到的元素正由另一个组件添加，我将它添加到包含父组件的模块中。显然，当我使用来自主组件的链接时，发生了一些不同的事情，但我不知道那是什么。失败的行（下面）位于

ngAfterContentInit

中，所以我不知道为什么它找不到元素

这是组件中失败的代码：

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

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

下面是如何添加的

主要组件HTML：

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

。。。

子组件：

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

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

@组件({
...
选择器：'员工组件'，
模板：`
`,
})

以下是我查看页面时的元素：

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

使用

ngAfterViewInit

代替

ngAfterContentInit

：

  ngAfterViewInit () {

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

  }

---

我们使用

ngAfterContentInit

等待加载

中的投影内容。

能否显示模板？@FredrikLundin thx。添加更多您是否尝试使用ngAfterViewInit进行此操作？哦，我相信您。它必须是关于组件之间的相互作用。正如我在问题中提到的，它并不总是失败的。如果我单击指向组件的链接，它就会工作。您能否显示一些与此交互相关的代码。