web-dev-qa-db-fra.com

Comment définir le paramètre par défaut pour @Input dans Angular2?

Supposons que j'ai un composant qui affichera une propriété name, il se présente comme suit:

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

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

Le problème est, comment pourrais-je afficher [noname] quand une personne utilisant ce composant mais ne transmettant aucune propriété name?

La seule solution qui me vienne à l'esprit consiste à utiliser un opérateur logique à l'intérieur d'un modèle tel que {{ name || '[noname]' }}.

javascripttypescriptangular
19
jasonslyvia

essayer 

@Input() name: string = 'noname';
39
Качалов Тимофей

Vous pouvez intercepter @Input() avec un passeur et le faire sauvegarder par un champ privé. Dans setter, vous effectuez une vérification nulle afin que le champ ne soit défini que sur une valeur non nulle. Enfin, vous liez votre modèle à un domaine privé dans lequel vous avez défini la valeur initiale.

1
dee zg

Je pense que vous pouvez utiliser votre idée d'utiliser le modèle. Donc ce serait:

En composant:

@Input () name:String;

Dans le modèle:

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

Cela vérifierait si le nom est vide et utiliser '[aucun nom]' ou insérer le nom si le nom est passé.

0
Farasi78

Dans le composant, vous devez initialiser comme ceci:

@Input () name:String='';

Dans le HTML, vous pouvez utiliser:

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