能否在不可修改父组件时，通过Angular插值显示自定义组件？

直接让getData()返回Angular组件实例是行不通的——父组件用的是插值绑定({{ getData() }})，它只能处理字符串/文本内容。不过有两种可行方案，完全不需要修改父组件：

方案1：动态渲染组件为安全HTML字符串（推荐） #

先定义你的自定义组件：

@Component({
  selector: 'app-custom-title',
  template: '<h2>My Title</h2>'
})
export class CustomTitleComponent {}

然后在子组件中，借助Angular的组件工厂和DOM处理能力，把自定义组件转换成安全的HTML字符串返回：

import { Component, ComponentFactoryResolver, ViewContainerRef, DomSanitizer } from '@angular/core';
import { ParentComponent } from './parent.component';
import { CustomTitleComponent } from './custom-title.component';

@Component({
  template: '<ng-template #componentContainer></ng-template>'
})
export class ChildComponent extends ParentComponent {
  @ViewChild('componentContainer', { read: ViewContainerRef }) private container!: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private sanitizer: DomSanitizer
  ) {
    super();
  }

  getData(): string {
    // 创建自定义组件实例
    const factory = this.resolver.resolveComponentFactory(CustomTitleComponent);
    const componentRef = this.container.createComponent(factory);
    
    // 获取组件DOM的HTML字符串
    const componentHtml = componentRef.location.nativeElement.outerHTML;
    
    // 销毁临时组件实例，避免内存泄漏
    componentRef.destroy();
    
    // 返回经过安全校验的HTML字符串
    return this.sanitizer.bypassSecurityTrustHtml(componentHtml) as string;
  }
}

注意：Angular 9+ 启用Ivy后，无需手动将CustomTitleComponent加入模块的entryComponents；旧版本需要添加。

方案2：直接往父组件目标元素插入组件 #

如果不想处理HTML字符串，可以在子组件初始化时，直接找到父组件中渲染getData()结果的DOM元素，插入自定义组件：

import { Component, ElementRef, ComponentFactoryResolver, ViewContainerRef, AfterViewInit } from '@angular/core';
import { ParentComponent } from './parent.component';
import { CustomTitleComponent } from './custom-title.component';

@Component({
  template: ''
})
export class ChildComponent extends ParentComponent implements AfterViewInit {
  constructor(
    private el: ElementRef,
    private resolver: ComponentFactoryResolver
  ) {
    super();
  }

  ngAfterViewInit(): void {
    // 定位父组件中显示getData结果的div（根据父组件模板结构选择器）
    const targetElement = this.el.nativeElement.parentElement.querySelector('div:last-child');
    
    if (!targetElement) return;

    // 清空原有内容，创建组件挂载容器
    targetElement.innerHTML = '';
    const componentHost = document.createElement('div');
    targetElement.appendChild(componentHost);

    // 动态创建并挂载自定义组件
    const factory = this.resolver.resolveComponentFactory(CustomTitleComponent);
    const viewContainer = this.el.injector.get(ViewContainerRef);
    viewContainer.createComponent(factory, undefined, viewContainer.injector, [], componentHost);
  }

  // 重写getData返回空字符串，避免显示冗余文本
  getData(): string {
    return '';
  }
}

这种方式更贴合Angular组件化的设计思路，不需要处理HTML字符串转义的问题。

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