Come impostare il parametro predefinito per @Input in Angular2?

Question

Dire che ho un componente che visualizzerà una proprietà name, così si va più o meno così:

import {Component, Input} from 'angular2/core'; 
 

 
@Component({ 
 
    selector: 'demo', 
 
    template: `<div>{{name}}</div>`, 
 
    styles: [``], 
 
}) 
 
export class Demo { 
 
    @Input() name: string; 
 
}

Il problema è, come potrei visualizzare [noname] quando qualcuno utilizza questo componente non, ma passando qualsiasi proprietà name?

L'unica soluzione che viene in mente è l'utilizzo dell'operatore di logica all'interno del modello come {{ name || '[noname]' }}.

Answer 1

provare

@Input() name: string = 'noname'; 

Answer 2

Penso che si possa utilizzare la vostra idea di utilizzare il modello. Quindi sarebbe:

In Componente:

@Input() name:String; 

In Template:

<div>{{ name != '' ? name : '[no name]' }}</div> 

Che sarebbe controllare per vedere se il nome è vuoto, e l'uso '[no name]' o inserto il nome se il nome è passato.

Answer 3

Nella componente si dovrebbe inizializzare come:

@Input() name:String=''; 

In HTML è possibile utilizzare:

{{ name ===''? 'empty string': name }} 

Answer 4

È possibile intercettare @Input() con un setter e lo hanno sostenuto da un campo privato. Nel setter, si effettua un nullcheck in modo che il campo venga impostato solo su un valore non nullo. Come ultimo, si lega il modello a un accesso privato in cui è stato impostato il valore iniziale.