angularjs - 使管道返回自定义组件

Question

在我的 Angular 2 应用程序中，我使用 ngFor 循环显示消息。这些消息包含 URL。我正在使用自定义管道来解析消息并使 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));
    }
}

Answer 1

Angular2 不处理动态添加到 DOM 的 HTML，如 element.appendChild()或 [innerHTML]除了一些安全 sanitizer 。
[xxx]="yyy" , (event)="handler" or {{content}}` 不会被处理，也不会处理选择器匹配而不是实例化的组件和指令。

Angular 仅为静态添加到组件模板的 HTML 实例化组件和指令。

一个异常(exception)是 ViewContainerRef.createComponent() .
见 Angular 2 dynamic tabs with user-click chosen components举个例子。