Angular12 Ivy模式自定义组件绑定textContent等属性内容被替换如何解决

• 你遇到的组件失效不是BUG，是Angular Ivy属性绑定的预期行为：当未给组件显式声明textContent/innerHTML/innerText输入时，Angular会将[textContent]这类绑定直接写入宿主元素的DOM属性，而这三个属性赋值时会直接清空宿主元素下所有已渲染的子节点，自然会覆盖组件内部渲染的所有内容，表现为组件失效。
• 你用getAttribute/hasAttribute无法获取绑定值是正常现象：方括号[]语法默认绑定的是DOM Property而非HTML Attribute，只有使用[attr.xxx]语法绑定才会写入HTML Attribute，因此常规Attribute操作方法无法读取。

方案1：构造函数阶段拦截宿主属性写入（通用性最高，无冗余） #

在组件构造函数中通过Object.defineProperty重写宿主元素三个属性的setter，拦截赋值操作后自行处理内容，不会触发默认的节点覆盖逻辑，示例代码如下：

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

@Component({
  selector: 'my-component',
  template: `<div class="component-inner">
    <!-- 内部原有组件结构 -->
    <div #contentContainer></div>
  </div>`
})
export class MyComponent {
  @ViewChild('contentContainer') contentContainer!: ElementRef<HTMLElement>;

  constructor(private el: ElementRef<HTMLElement>) {
    const host = this.el.nativeElement;
    // 重写三个属性的setter，拦截赋值
    ['textContent', 'innerHTML', 'innerText'].forEach(prop => {
      Object.defineProperty(host, prop, {
        set: (val: string) => {
          // 此处自行处理赋值逻辑，比如写入组件内部的容器
          if (this.contentContainer) {
            this.contentContainer.nativeElement[prop] = val;
          }
        },
        get: () => {
          return this.contentContainer?.nativeElement?.[prop] || '';
        },
        configurable: true
      })
    })
  }
}

该方案的优势：

• 无需声明额外Input，组件对外使用方式和原生DOM元素完全一致
• 完全兼容三种属性绑定场景，无逻辑遗漏
• 通用型强，可封装为混入类给所有自定义组件复用

方案2：声明同名Input绑定到同一处理逻辑（代码更易维护，Angular原生支持） #

通过输入别名将三个属性的赋值统一到同一个处理函数，冗余度极低，符合Angular官方最佳实践：

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

@Component({
  selector: 'my-component',
  template: `<div class="component-inner">
    <!-- 内部原有组件结构 -->
    <div [innerHTML]="content"></div>
  </div>`
})
export class MyComponent {
  private _content = '';
  get content() { return this._content; }

  @Input('textContent') 
  set textContent(val: string) {
    this._content = val;
  }

  @Input('innerHTML') 
  set innerHTML(val: string) {
    this._content = val;
  }

  @Input('innerText') 
  set innerText(val: string) {
    this._content = val;
  }
}

该方案的优势：

• 纯Angular原生API实现，无需操作DOM原型，兼容性更好
• 内容处理逻辑完全集中，可灵活扩展校验、过滤等能力
• 不受Angular版本迭代影响，稳定性更高

你提到的判断子节点数量的方案，可结合MutationObserver监听宿主元素的子节点变化，在第一次被覆盖前保存原有内部结构，覆盖后自动还原并提取绑定的内容，不过该方案性能开销高于上述两种方案，仅作为兜底方案使用。

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