Question

我有一个组件在<ng-content>标记周围声明了一些外部html。但是，如果内容属于特定的组件类，或者它包含某些标记，我希望能够访问这些标记。

例如，在下面的代码中，组件MyComponent已设置为MyWrapper的内容。从MyWrapper开始，我怎样才能获得卡在其中的MyComponent？

示例

- 包装模板 -

...
<ng-content #content></ng-content>
...

- 包装用法 -

<my-wrapper>
  <my-component></my-component>
</my-wrapper>

我的偏好是能够获得一个对象来表示在ng-content中设置的组件，所以我可以使用typescript来访问它。但是，我决定只能获得DOM对象。或者，如果我完全走错了路，并且应该采取另一种方式，我也会欢迎。

Answer 1

在阅读了一下之后，似乎在包装类中需要对代码稍作调整才能访问DOM元素：

而不是

...
<ng-content #content></ng-content>
...

如this answer on a different question所示，必须将ng-content包裹在div元素中。然后，使用@ViewChild访问它，如下所示：

- 模板 -

<div #content>
  <ng-content></ng-content>
</div>

- 类 -

@ViewChild('content')
private content;

内容字段将在包装器组件中的AfterViewInit方法中提供（但不一定在之前）：

ngAfterViewInit() {
  if (this.content) {
    console.log('content was present');
  }
  if (this.content instanceof MyComponent) {
    console.log('this should work too, but it doesn't.');
  }
}

缺点是我还没有找到回归原始组件类的方法。

Answer 2

我不久前就把它弄了，并且没有一段代码来展示它，所以我希望我能正确记住它

在模板中，您必须执行以下操作：

<my-wrapper>
  <my-component #mySubComponent></my-component>  
</my-wrapper>

并在MyWrapperComponent中添加以下内容：

@ContentChild('mySubComponent')
private subComponent: MyComponent;

ngAfterContentInit() {
    // You have access here to your public properties and methods of your sub component
}

Angular ng-content：如何在里面找到元素？

2 个答案: