Question

在Angular 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);

  }

我们使用ngAfterContentInit等待<ng-content>中的预计内容加载。

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

1 个答案: