Angular2/Angular4中的无状态或绑定一次组件？

Question

可以说我需要根据某个数值输出一个图标。例如：1 - 红色图标，2 - 蓝色图标，3 - 绿色图标等。我希望只进行演示，不需要存储任何用途的状态，图标（或数字值）的状态也会不变。

我不知道什么是实现这种演示输出的最佳方式？

目前我使用的管道：

<div [innerHtml]="1 | numberToIcon"></div> 

这样的语法是难记。所以我想用组件替换它：

<my-icon value="1" /> 

但我担心使用该组件会使Angular track组件的状态。我不想浪费它的记忆。

有没有“轻”组件的方式？也许组件没有状态？

Answer 1

您可以使用

@Component({ 
    ..., 
    changeDetection: ChangeDetectionStrategy.OnPush, 
}) 
export class MyIconComponent { 
    constructor(this.cdRef:ChangeDetectorRef) { 
    } 

    ngOnInit() { 
    cdRef.detach(); 
    } 
} 

OnPush原因改变检测只发生当输入改变或甚至处理程序调用或时显式调用。 如果你分离变化探测器，那么Angular不应该再对这个组件做任何变化检测。