使管道返回一個自定義組件

在我的Angular 2應用程序中，我使用ngFor循環顯示消息。這些消息包含URL。我使用自定義管道來分析消息並使URL可點擊。此外，如果網址是YouTube視頻的鏈接，我會將鏈接轉爲嵌入代碼。使管道返回一個自定義組件

由於性能方面的原因，我想先顯示視頻的縮略圖，並且只有當用戶單擊縮略圖時才切換到嵌入代碼。爲了實現這一點，而不是讓糾結的毛茸茸的混亂，我想給每個視頻自己的自定義組件。我只需傳入視頻ID，然後可以在組件中處理所有內容。

我可以讓我的管道返回HTML，但如果我讓它返回一個自定義組件（例如：<youtube-video [videoID]="xxx"></youtube-video>），組件永遠不會被Angular處理，所以它不起作用。

這是否可能，我該怎麼辦？

這是我的菸斗：

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

let linkify  = require('linkifyjs'); 
let linkifyHtml = require('linkifyjs/html'); 
let linkifyStr = require('linkifyjs/string'); 

@Pipe({ 
    name: 'linkify' 
}) 
export class LinkifyPipe implements PipeTransform { 
    constructor(private domSanitizer: DomSanitizer) {} 

    transform(value: string) { 
     if (!value) return value; 

     let ytRegExp: RegExp = /^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/; // parse YT link 
     let urls: any[] = linkify.find(value); // get all URLs 
     urls.forEach((url) => { 
      if (ytRegExp.test(url.value)) { // it's a YT video 
       let videoID = url.value.replace(ytRegExp, '$2'); 
       value = value.replace(url.value, '<iframe width="320" height="180" src="https://www.youtube.com/embed/' + videoID + '?rel=0" frameborder="0" allowfullscreen></iframe>'); 
      } 
     }); 

     return this.domSanitizer.bypassSecurityTrustHtml(linkifyHtml(value)); 
    } 
}

來源

2016-11-23 Brother Woodrow

什麼管道？什麼HTML？ –

@GünterZöchbauer我將我的管道添加到OP。正如你所看到的，它返回HTML，但我希望它返回一個自定義的Angular組件。 –