Angular 12 如何获取可复用组件标签内子内容并通过@Input接收

Angular 12 获取组件标签内部文本的解决方案 #

你之前尝试@Input无法获取的原因是：写在组件标签闭合区间内的内容不属于组件输入属性，Angular将其归类为内容子节点，需要用内容投影/内容查询相关API处理。以下是两种适配不同需求的实现方案：

方案1：内容投影（无TS侧变量需求优先选择）

无需修改TS逻辑，仅调整组件模板即可，支持渲染任意嵌套内容（纯文本、HTML标签都可兼容），是实现可复用组件内容插槽的标准方案：
修改组件元数据中的template字段，将原来的{{ text }}替换为<ng-content></ng-content>：

template: `
  <div class="button" [style.backgroundColor]="color" (click)="onClick($event)">
    <!-- 标签内部的内容会自动渲染到这个位置 -->
    <ng-content></ng-content>
  </div>
`

修改后父组件中写在<app-ui-text-button>标签内的Press Me!会直接渲染到按钮对应位置，无需额外配置。

方案2：需要在TS侧将文本作为变量使用

如果你需要在组件逻辑中用到这个文本值（比如埋点上报、文本长度校验、字符串拼接等），可以通过注入ElementRef获取宿主元素的文本内容：
修改后的完整组件代码如下：

import { Component, Input, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-ui-text-button',
    styles: [`
            .button {
                padding: 12px 8px;
                border-radius: 5px;
                cursor: pointer;
            }
            .button:hover {
                filter: brightness(1.2);
            }
        `],
    template: `
        <div class="button" [style.backgroundColor]="color" (click)="onClick($event)">{{ text }}</div>
    `
}
)
export class AppUiTextButtonComponent implements AfterViewInit {

    // Inputs
    @Input() text = '默认文本';
    @Input() color = '#619b8a';

    // Outputs
    @Output() clicked = new EventEmitter<any>();

    constructor(private elementRef: ElementRef) {}

    ngAfterViewInit(): void {
      // 优先使用父组件显式传入的text属性，未传入则取标签内的文本
      if (this.text === '默认文本') {
        const hostEle = this.elementRef.nativeElement;
        this.text = hostEle.textContent.trim();
        // 清空宿主元素原文本，避免重复渲染
        hostEle.textContent = '';
      }
    }

    onClick(event: Event) {
        this.clicked.emit(event);
    }
}

该方案同时兼容两种使用方式：父组件显式传[text]="xxx"就用传入值，未传值则自动读取标签内部的文本。

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