Angular Elements结合ng-content内容投影失效问题咨询

Angular Elements支持内容投影，不需要强制改用slots，你遇到的问题是Angular模板编译机制导致的，具体原因和解决方法如下：

问题原因 #

当在Angular组件（比如app.component）的模板中使用自定义元素时，Angular的模板编译器会将自定义元素内部的内容当作Angular模板代码解析，而非原生DOM内容，这就导致自定义元素里的<ng-content>无法正确捕获并投影这些内容。而在index.html中是原生DOM环境，不存在Angular模板编译的干扰，所以内容投影正常。

解决方法 #

方法1：添加CUSTOM_ELEMENTS_SCHEMA #

在你的Angular项目的根模块（AppModule）中声明CUSTOM_ELEMENTS_SCHEMA，告诉Angular编译器忽略未知的自定义元素和属性，这样自定义元素内部的内容会被当作原生DOM处理，<ng-content>就能正常工作：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

方法2：原生DOM插入（可选） #

如果不想全局配置schema，也可以通过代码将内容以原生DOM的方式插入自定义元素，但这种方式不如第一种简洁，适合局部场景：

// 在app.component.ts中
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<my-component #myComp></my-component>'
})
export class AppComponent implements OnInit {
  @ViewChild('myComp') myComp!: ElementRef<HTMLElement>;

  ngOnInit() {
    // 插入文本内容
    this.myComp.nativeElement.textContent = 'Hello Angular!';
    // 或者插入复杂DOM结构
    const contentNode = document.createElement('div');
    contentNode.innerHTML = '<strong>Hello Angular!</strong>';
    this.myComp.nativeElement.appendChild(contentNode);
  }
}

关于Slots的说明 #

不需要改用slots，除非你需要让自定义元素完全遵循原生Web Component的规范，以便在非Angular环境中也能通过slots实现内容投影。但对于Angular环境内的使用，通过上述配置后，Angular Elements的<ng-content>可以正常工作。

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