如何在Angular 2中使用PipeTransform中的自定義組件？

Question

我想在我的管道轉換中使用我的自定義組件狀態，但它不起作用。

瀏覽器僅顯示沒有< Status />的值。 這就像我的組件沒有被調用。

為什么？ 請問怎么解決？

組件狀態已添加到應用程序模塊。

status.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'status'
})
export class StatusPipe implements PipeTransform {

  transform(value: any): string {
    let status = '<Status type="ok"><b>' + value + '</b></Status>';
    return status;
  }

}

的index.html

<td [innerHtml]="result.status | status"></td>

status.component.ts

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

@Component({
   selector: 'Status',
    template: '<span class="status status--{{ type }}">
      <span class="status__message">
         <ng-content></ng-content>
      </span>
   </span>',
   styleUrls: ['./status.component.css'],
   encapsulation: ViewEncapsulation.None

})
export class StatusComponent {

    @Input() type:any;    

}

Answer 1

因為當它應該是文本值時，你試圖給它HTML值。

嘗試這個 ：

<span [innerHTML]="yourValue | status"></span>

代替

<span>{{yourValue | status}}</span>