Comment utiliser un composant personnalisé à l'intérieur de PipeTransform dans Angular 2?

Question

Je voudrais utiliser mon statut de composant personnalisé dans ma transformation de tuyau, mais cela ne fonctionne pas.

Le navigateur n'affiche que la valeur sans < Status />. C'est comme si mon composant n'était pas appelé.

Pourquoi? Comment résoudre cela s'il vous plaît?

L'état des composants a été ajouté au module d'application.

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

Parce que yo Vous essayez de lui donner des valeurs HTML alors que ce devrait être des valeurs de texte.

Essayez ceci:

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

Au lieu de

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