Angular 5中如何通过ng-content访问组件内部data属性？

首先得掰扯清楚：你现在的写法里，<my-component>内部的{{data}}是父组件的变量，不是PrintComponent里的data——因为ng-content只是把父组件的内容原样投影到子组件里，它不会自动关联子组件的内部属性。

下面给你两种实用的解决方法：

方法1：模板引用变量直接访问（最简单） #

给你的子组件加个模板引用标记，然后在投影内容里直接通过这个引用访问子组件的属性：

修改使用方式： #

<my-component #printComp> {{printComp.data}} </my-component>

这里的#printComp是子组件PrintComponent的实例引用，printComp.data就能直接拿到子组件里的test值了。

另外，顺便提个小细节：你的组件代码里不需要@Injectable()装饰器哦，这个是给服务用的，组件只需要@Component就足够了，所以可以把那行删掉：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<ng-content></ng-content>',
})
export class PrintComponent { data = 'test' }

方法2：用<ng-template>结合ngTemplateOutlet传递上下文（更灵活） #

如果之后你需要更复杂的投影场景（比如多个投影区域、传递多个变量），可以用这种方式：

修改子组件代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <!-- 用ngTemplateOutlet把模板和子组件上下文绑定 -->
    <ng-container *ngTemplateOutlet="content; context: { $implicit: data }"></ng-container>
  `,
})
export class PrintComponent { data = 'test' }

修改父组件使用方式： #

<my-component>
  <!-- 用ng-template接收子组件传递的上下文 -->
  <ng-template let-childData>
    {{childData}}
  </ng-template>
</my-component>

这里let-childData会接收上下文里的$implicit值（也就是子组件的data），这种方式适合需要传递多个变量或者动态模板的场景。

内容的提问来源于stack exchange，提问作者blkgoose