Question

在我的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));
    }
}

Answer 1

Angular2不会像element.appendChild()或[innerHTML]那样动态地处理添加到DOM的HTML，除非为了安全而进行一些清理。

不处理

[xxx]="yyy"，(event)="handler" or {{content}}`以及选择器匹配且未实例化的组件和指令。

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

一个例外是ViewContainerRef.createComponent() 有关示例，请参阅Angular 2 dynamic tabs with user-click chosen components。

使管道返回自定义组件

1 个答案: