Angular 14使用DomSanitizer自定义管道报错：未识别safeHtml及组件未声明

错误原因分析 #

1. "unresolved pipe: safeHtml" #

• 你把管道类命名为PageLoaderComponent，且用了@Pipe装饰器，这混淆了Angular的构件类型——Angular会把带Component后缀的类默认识别为组件，而非管道，导致模板无法找到对应的管道。
• 自定义管道未在Angular模块中注册，Angular无法识别这个管道。

2. "PageLoaderComponent is not declared in any Angular module" #

• 这个类本质是管道，但你给它起了组件的名字，且未在模块的declarations数组中声明该构件（不管是组件还是管道，都需要在模块中声明才能被Angular识别）。

解决方案 #

1. 修正管道类的定义 #

把管道类的命名和结构改成符合Angular管道规范的样式，去掉无关属性：

import { DomSanitizer } from '@angular/platform-browser';
import { PipeTransform, Pipe } from "@angular/core";

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}

    transform(value: string): any {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

2. 在Angular模块中注册管道 #

找到你的功能模块文件（比如app.module.ts），将SafeHtmlPipe添加到declarations数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入管道和你的组件
import { SafeHtmlPipe } from './path/to/safe-html.pipe';
import { PageLoaderComponent } from './path/to/page-loader.component';

@NgModule({
  declarations: [
    PageLoaderComponent,
    SafeHtmlPipe // 注册自定义管道
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [PageLoaderComponent]
})
export class AppModule { }

3. 模板使用验证 #

你的原有HTML模板写法是正确的，只要管道注册成功，[innerHTML]="pageHtml | safeHtml"就能正常生效。

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