Staatenlose oder einmal gebundene Komponenten in Angular2/Angular4?

Question

Sagen wir, ich muss ein Symbol ausgeben, basierend auf einem numerischen Wert. Zum Beispiel: 1 - rotes Symbol, 2 - blaues Symbol, 3 - grünes Symbol usw. Ich möchte nur eine Präsentation haben und muss den Zustand für keine Verwendung speichern, auch der Zustand des Symbols (oder der numerische Wert) wird nicht ändern.

Ich frage mich, was ist der beste Weg, um solche Präsentationsausgabe zu erreichen?

Zur Zeit benutze ich ein Rohr:

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

Solche Syntax ist schwer zu merken. So würde Ich mag es mit einer Komponente ersetzen:

<my-icon value="1" /> 

Aber ich bin besorgt, dass die Komponente Staat machen wird Schrägspur-Komponente. Und ich möchte die Erinnerung dafür nicht verschwenden.

Gibt es irgendwelche "leichten" Komponenten? Vielleicht Komponenten ohne einen Zustand?

Answer 1

können Sie

verwenden

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

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

OnPush Ursachen Erkennung passieren nur dann ändern, wenn ein Eingangsänderungen oder sogar Handler aufgerufen wurde oder wenn explizit genannt. Wenn Sie den Änderungsdetektor lösen, sollte Angular für diese Komponente keine Änderungserkennung mehr durchführen.