组件传递内容

约 178 字小于 1 分钟

2026-09-17

这里的 content projection 是指父组件将内容投影到子组件中。

就类似 vue 中的 slot，我们在 angular 中也可以实现类似的功能。

/src/app/app.ts

import { Component } from '@angular/core'
import { ChildComponent } from './child/child.ts'

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  template: `
    <div class="parent">
        <h1>父组件</h1>
        <!-- 这里的内容就是要传递给子组件的内容 -->
        <child-component>
            <p>这是父组件传递给子组件的内容</p>
        </child-component>
    </div>
`,
  imports: [ChildComponent],
})
export class AppComponent {}

/src/child/child.ts

import { Component } from '@angular/core'
@Component({
  selector: 'child-component',
  styleUrl: './child.css',
  template: `
    <div class="child">
        <h2>子组件</h2>
        <!-- 这里的 ng-content 就是用来接收父组件传递过来的内容 -->
        <ng-content></ng-content>
    </div>
  `,
})
export class ChildComponent {}