Angular如何获取组件标签包裹的内部内容？

一、获取组件标签内的文本内容 #

有两种常用方式可以实现：

1. 直接通过DOM元素获取 #

在组件类中借助ElementRef访问组件的原生DOM元素，就能拿到标签内的文本：

组件类代码：

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<div><ng-content></ng-content></div>`
})
export class MyComponent implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    const innerText = this.el.nativeElement.textContent.trim();
    console.log('组件内部文本:', innerText);
  }
}

调用示例：

<my-component>这是<my-component>标签里的文本</my-component>

2. 用@ContentChild精准获取 #

给模板里的ng-content设置标识，再通过@ContentChild获取对应内容的引用：

组件类代码：

import { Component, ContentChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<ng-content #contentRef></ng-content>`
})
export class MyComponent implements OnInit {
  @ContentChild('contentRef') contentRef!: ElementRef;

  ngOnInit() {
    const contentText = this.contentRef.nativeElement.textContent.trim();
    console.log('组件内部文本:', contentText);
  }
}

二、自定义复用子内容到mat-option #

这种场景需要用模板引用传递内容，让子组件能复用父组件传入的动态内容：

1. 实现自定义my-select组件 #

import { Component, Input, TemplateRef, ContentChild } from '@angular/core';

@Component({
  selector: 'my-select',
  template: `
    <mat-select [(value)]="selectedValue">
      <mat-option *ngFor="let item of options" [value]="item">
        <!-- 复用父组件传入的模板 -->
        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
      </mat-option>
    </mat-select>
  `
})
export class MySelectComponent {
  @Input() options: any[] = [];
  selectedValue: any;
  // 获取父组件传入的模板内容
  @ContentChild(TemplateRef) itemTemplate!: TemplateRef<any>;
}

2. 父组件中调用自定义组件 #

<my-select [options]="MyObjects">
  <!-- 定义要复用的内容，$implicit对应循环的每个item -->
  {{ $implicit.MyName }}
</my-select>

父组件中定义数据源：

MyObjects = [
  { MyName: '商品A' },
  { MyName: '商品B' },
  { MyName: '商品C' }
];

这样每个mat-option都会渲染{{ $implicit.MyName }}对应的内容，实现动态复用。

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