Angular 12+中从组件调用选择器并通过内容投影传递内容

下面是几种适合新手的常用实现方式，涵盖不同场景：

1. 父子组件通过@Input传递数据（基础场景） #

如果两个组件是直接的父子关系（父组件加载子组件的选择器），用@Input是最直接的方式：

步骤1：子组件定义接收属性 #

在需要接收内容的子组件中，用@Input装饰器声明一个输入属性：

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<div class="child-box">{{ receivedText }}</div>`
})
export class ChildComponent {
  // 定义输入属性，接收父组件传递的内容
  @Input() receivedText!: string;
}

步骤2：父组件加载选择器并传值 #

在父组件的模板中直接使用子组件的选择器，通过属性绑定传递内容：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <!-- 使用子组件选择器，通过方括号绑定属性传值 -->
    <app-child [receivedText]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  // 要传递给子组件的内容
  parentMessage = '这是从父组件传来的文本内容';
}

2. 内容投影（ng-content）传递HTML/组件（复杂UI场景） #

如果需要传递的是HTML结构、甚至其他组件，用内容投影ng-content更合适：

步骤1：子组件设置内容占位符 #

在子组件模板中用<ng-content>标记内容插入的位置：

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

@Component({
  selector: 'app-child',
  template: `
    <div class="child-container">
      <h4>子组件头部</h4>
      <!-- 这里会替换成父组件传入的内容 -->
      <ng-content></ng-content>
      <h4>子组件底部</h4>
    </div>
  `
})
export class ChildComponent {}

步骤2：父组件传递内容到选择器内部 #

在父组件中使用子组件选择器时，直接在标签内部写入要传递的内容：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child>
      <p>这是父组件传递的段落内容</p>
      <!-- 甚至可以嵌套其他组件 -->
      <app-another-component></app-another-component>
    </app-child>
  `
})
export class ParentComponent {}

3. 服务共享数据（跨非父子组件场景） #

如果两个组件没有直接的父子关系（比如兄弟组件、跨路由组件），可以用Angular服务实现内容传递：

步骤1：创建共享数据服务 #

// content-share.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ContentShareService {
  // 用BehaviorSubject保存并推送数据，初始值为空字符串
  private contentSource = new BehaviorSubject<string>('');
  currentContent = this.contentSource.asObservable();

  // 更新内容的方法
  updateContent(content: string) {
    this.contentSource.next(content);
  }
}

步骤2：发送内容的组件调用服务 #

// sender.component.ts
import { Component } from '@angular/core';
import { ContentShareService } from './content-share.service';

@Component({
  selector: 'app-sender',
  template: `<button (click)="sendContent()">点击传递内容</button>`
})
export class SenderComponent {
  constructor(private shareService: ContentShareService) {}

  sendContent() {
    this.shareService.updateContent('通过共享服务传递的内容');
  }
}

步骤3：接收内容的组件订阅服务数据 #

// receiver.component.ts
import { Component, OnInit } from '@angular/core';
import { ContentShareService } from './content-share.service';

@Component({
  selector: 'app-receiver',
  template: `<div>{{ displayedContent }}</div>`
})
export class ReceiverComponent implements OnInit {
  displayedContent = '';

  constructor(private shareService: ContentShareService) {}

  ngOnInit() {
    // 订阅服务的数据变化，更新本地内容
    this.shareService.currentContent.subscribe(content => {
      this.displayedContent = content;
    });
  }
}

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