如何访问 ng-content 投射的原生元素答案

【问题标题】：How to access the native element projected by ng-content如何访问 ng-content 投射的原生元素
【发布时间】：2020-05-12 14:10:33
【问题描述】：

这是我的父组件html

<app-card>
  <div class="body">This is body</div>
  <div class="title">This is title</div>
</app-card>

这是我的 CardComponent

<div class="card">
            <ng-content  select=".title"></ng-content>
            <ng-content select=".body"></ng-content>
</div>

所以我想在 CardComponent 中访问这个元素 (<div class="body">This is body</div>)，如果它是一个组件，我可以通过 ContentChild 访问它，但如何访问它？

我尝试使用模板变量（在 ContentChild 中传递变量名）并尝试从 ngAfterContentInit 获取未定义的形式访问它

【问题讨论】：

在组件代码中使用原生“document.querySelector('.body')”怎么样？另外 - 如果您发布 stackblitz 来证明问题，这将很容易提供帮助
谢谢@happyZZR1400 ，这将是一些hacky方法，我只是想检查是否有角度支持。
我你看到你需要做一些 hacky 技巧来实现你的目标 - 这可能表明你可以使用其他方法来做事，你能更详细地解释一下 - ru 试图做什么?
我打算了解ContentChild，到处都有很多获取组件的例子，但是没有地方访问组件中投影的本机元素，我想弄清楚怎么做那
“ng-content”背后的想法是：把你想要的放在这里，它会在父组件中呈现。所以我猜你的想法：让父母了解孩子的原生元素 - 这有点违背 angular-guys 的想法（根据他们的说法，父母应该是不可知论的）

【解决方案1】：

您可以执行以下操作：

.ts

@ViewChild('myDiv', {static: false}) div: ElementRef;

ngAfterViewInit() {
    // now access div here
    console.log(this.div.nativeElement);
}

这里，使用@ViewChild 指令获取对变量myDiv 的引用。组件视图初始化后，您将在 ngAfterViewInit() 中拥有相应的元素。

this.div 值可以使用EventEmitter 或共享服务 传递。现在您可以在子组件中订阅/监听此更改。

【讨论】：

我认为你错过了 <div #myDiv class="body">This is body</div> 部分是从子组件中的父组件传递的，我只有 <ng-content select=".body"></ng-content> 并且在此处使用模板引用不起作用，我检查了
哦，好吧.. 也许现在在ngAfterViewInit() 中，您可以使用 EventEmitter 或共享服务发出 this.div 值。现在您可以在子组件中订阅/收听此更改。这对你有用吗？
是的，它可以工作，正如上面评论的那样，document.querySelector 可以轻松完成，但我想看看 ContentChild 是否可以实现。据我了解 ContentChild 的目的是访问投影到组件的东西，为什么没有这样一个简单的解决方案。无论如何谢谢