Comment masquer et de remplacement d'un composant dans Angular2

Bonjour, j'ai un parent du composant (A) et il a 2 enfants composants (B et C). Parent d'Une affiche par défaut, l'enfant de la composante B. Maintenant, quand on clique sur un bouton qui s'affiche sur Un parent, il remplace enfant composant B avec enfant composante C. Comment puis-je remplacer le composant B avec le Composant C après que le bouton est cliqué dans angular2?

OriginalL'auteur EI-01 | 2016-07-18

  1. 9

    Pour ce faire vous pouvez utiliser le *ngIf la directive ou de la hidden de la propriété.

    Notez la différence:

    • *ngIf supprime et recrée l'élément:

    Si l'expression attribuée à ngIf renvoie une valeur fausse alors l'
    l'élément est supprimé de la DOM, sinon un clone de l'élément est
    réinséré dans le DOM.

    • hidden cache l'élément à l'aide de display: none

    Angulaires du la documentation:

    Afficher/masquer la technique est probablement pas un problème pour les petites élément arbres. Nous
    il faut se méfier lorsqu'on se cache de grands arbres; NgIf peut être le choix le plus sûr.
    Toujours mesurer avant de sauter aux conclusions.

    Vérifier l'exemple ci-dessous:

    @Component({
  selector: 'my-app',
  template: `
    <b>Using *ngIf:</b>
    <div *ngIf="!isOn">Light Off</div>
    <div *ngIf="isOn">Light On</div>
    <br />
    <b>Using [hidden]:</b>
    <div [hidden]="isOn">Light Off</div>
    <div [hidden]="!isOn">Light On</div>
    <br />
    <button (click)="setState()">{{ getButtonText() }}</button>
  `
})
export class AppComponent {

  private isOn: boolean = false;

  getButtonText(): string {
    return `Switch ${ this.isOn ? 'Off' : 'On' }`;
  }
  setState(): void {
    this.isOn = !this.isOn;
  }

}

    Plunker: http://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0

    Pour en savoir plus à propos de [hidden], j'indique cet article: http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

    Espère que ça aide.

    merci pour la réponse. Que faire si u ont de multiples composants enfants seront NgSwitch être plus adapté qu'un NgIf?
    Bien sûr, vous pouvez modifier la isOn variable une Chaîne de caractères représentant le composant sélectionné, puis ajouter ngSwitchCase pour chaque scénario possible.
    Oui, si vous disposez de plusieurs composants enfants c'est plus facile à utiliser ngSwitch. Les deux *ngIf et ngSwitch supprimer et de recréer des éléments du DOM. J'ai ajouté un ngSwitch cas de la plunker: plnkr.co/modifier/7b1eWgSHiM1QV6vDUAB0.
    merci pour l'aide
    merci pour l'aide

    OriginalL'auteur Alexandre Junges

  2. 4

    En général, vous auriez deux composants dans le Parent d'Un modèle, mais vous pouvez utiliser un ngIf à la faire apparaître seulement quand ils sont censés.

    <button (click)="setButtonClicked(true)">Click Me</button>
<component-b *ngIf="!buttonWasClicked"></component-b>
<component-c *ngIf="buttonWasClicked"></component-c>

    Parent d'Un modèle, vous avez le code correspondant à l'ensemble de la propriété:

    buttonWasClicked: boolean = false;

setButtonClicked(clicked: boolean) {
    this.buttonWasClicked = clicked;
}

    Vous préférerez peut-être utiliser NgSwitch au lieu de NgIf.

    OriginalL'auteur StriplingWarrior