Angular 2 - 管道值和返回 DOM 元素答案

【问题标题】：Angular 2 - Piping value and returning DOM elementAngular 2 - 管道值和返回 DOM 元素
【发布时间】：2016-12-29 09:14:35
【问题描述】：

我正在尝试使用自定义管道来获取 int 值，然后返回基于该 int 的材料设计图标。

HTML：

{{item.MetGoal | NumberToStatusSymbol}}

TypeScript/JS：

transform(value, args?) {
    switch (value){
        case '0':
            return $.parseHTML(`<i class="material-icons text-red">&#xE5C9;</i>;`);
        case '1':
            return $.parseHTML(`<i class="material-icons text-green">&#xE86C;</i>`);
        case '2':
            return $.parseHTML(`<i class="material-icons text-yellow">&#xE8B2;</i>`);
        default: break;
    }
}

但是当页面加载时它只显示 [object HTMLElement] 而不是返回中列出的实际 HTML 元素。

【问题讨论】：

标签： angular angular2-pipe

【解决方案1】：

<div [outerHTML]="item.MetGoal | NumberToStatusSymbol"

{{}} 进行字符串插值并将结果添加为字符串。这似乎不是你想要的。

您可能需要进行一些消毒。另见In RC.1 some styles can't be added using binding syntax

case '0':
  return &#xE5C9;
...

与

<i class="material-icons">{{item.MetGoal | NumberToStatusSymbol}}</i>

可能有效，但您必须为 text-xxx 属性使用不同的管道。

【讨论】：

这似乎很接近，但是 MD 图标似乎没有正确响应。它没有显示图标，而是仅显示字符文本。
如果 MD 图标是 Angular 组件或指令，这将不起作用（我自己没有使用 Angular2 材料）在这种情况下，您需要创建动态组件，如 stackoverflow.com/questions/36325212/…
通过outerHTML属性绑定得到它，一如既往地感谢Gunter。
唯一奇怪的是，在开关应用材料设计 i 标记和包含的类时，不应用样式添加的颜色类（文本-***）。
我明白了。无法将其应用于动态添加的元素。它可能仅适用于传递 unicode 值，但不适用于传递 <i...> 元素。