typescript - Hvordan skjule og erstatte en komponent i Angular2

Hei, jeg har en foreldrekomponent (A) og den har 2 barnekomponenter (B og C). Forelder A viser som standard barnekomponent B. Nå, når en knapp som vises på forelder A klikkes, erstatter den barnekomponent B med barnekomponent C. Hvordan kan jeg erstatte komponent B med komponent C etter at knappen er klikket i Angular2?

Svar #1

For å gjøre det kan du bruke *ngIf-direktivet eller hidden-egenskapen.

Merk forskjellen:

  • *ngIf fjerner og gjenskaper elementet:

Hvis uttrykket som er tildelt ngIf evalueres til en falsk verdi, fjernes elementet fra DOM-en, ellers settes en kopi av elementet inn i DOM-en igjen.

  • hidden skjuler elementet ved å bruke display: none

Fra Angulars dokumentasjon:

Vis/skjul-teknikken er sannsynligvis grei for små elementtrær. Vi bør være forsiktige når vi skjuler store trær; NgIf kan være det sikrere valget. Mål alltid før du trekker konklusjoner.

Se eksemplet nedenfor:

@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

For videre lesing om [hidden], viser jeg til denne artikkelen: http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

Håper det hjelper.

Svar #2

Vanligvis ville du ha begge komponentene i malet til Forelder A, men du ville bruke en ngIf for å få dem til å vises bare når de skal.

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

I modellene til Forelder A ville du hatt tilsvarende kode for å sette egenskapen:

buttonWasClicked: boolean = false;

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

Du foretrekker kanskje å bruke NgSwitch i stedet for NgIf.

Relaterte artikler