typescript - 如何使用管道将html传递给角度模板？

Question

我试图通过星垫图标来显示评级，但我得到的只是字符串而不是 HTML。

管道

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

@Pipe({ name: 'rating' })
export class RatingPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  private RateIcon = "<mat-icon>star_rate</mat-icon>";
  private _RateIcon = "<mat-icon class='activeIcon'>star_rate</mat-icon>";
  private element ="";

  transform(val: number) {  
    for (let index = 0; index < val; index++) {
       this.element += this._RateIcon;
    }
    for (let index = 0; index < (5 - val); index++) {
      this.element += this.RateIcon;
    }
    return this.sanitizer.bypassSecurityTrustHtml(`<span>${this.element}</span>`);
  }
}

组件.html

<div [innerHTML]="'artcl.rating' | 'rating'"></div>

当我使用浏览器检查元素时，我得到以下信息

<mat-icon class="activeIcon">star_rate</mat-icon>
<mat-icon class="activeIcon">star_rate</mat-icon>
<mat-icon class="activeIcon">star_rate</mat-icon>
<mat-icon>star_rate</mat-icon>
<mat-icon>star_rate</mat-icon>

但在浏览器视图本身，我得到以下

star_ratestar_ratestar_ratestar_ratestar_rate

那我的管道有什么问题？

标签： typescriptangular-pipe