Как скрыть и заменить компонент в Angular2

typescript angular angular2-components

14716 просмотра

2 ответа

418 Репутация автора

Здравствуйте, у меня есть родительский компонент (A), и у него есть 2 дочерних компонента (B и C). Родитель A по умолчанию отображает дочерний компонент B. Теперь, когда нажата кнопка, отображаемая в родительском A, она заменяет дочерний компонент B дочерним компонентом C. Как я могу заменить компонент B компонентом C после нажатия кнопки в angular2?

Автор: EI-01 Источник Размещён: 18.07.2016 10:36

Ответы (2)


4 плюса

114673 Репутация автора

Обычно у вас есть оба компонента в шаблоне родительского A, но вы должны использовать ngIfих, чтобы они появлялись только тогда, когда они должны.

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

В модели Родителя А у вас будет соответствующий код для установки свойства:

buttonWasClicked: boolean = false;

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

Вы можете предпочесть использовать NgSwitchвместо NgIf.

Автор: StriplingWarrior Размещён: 18.07.2016 10:45

9 плюса

845 Репутация автора

Для этого вы можете использовать *ngIfдирективу или hiddenсвойство.

Обратите внимание на разницу:

  • *ngIf удаляет и воссоздает элемент:

Если выражение, присвоенное ngIf, оценивается как ложное значение, тогда элемент удаляется из DOM, в противном случае клон элемента повторно вставляется в DOM.

  • hidden скрывает элемент, используя display: none

Из угловой документации :

Техника показа / скрытия, вероятно, подходит для небольших элементов. Мы должны быть осторожны, пряча большие деревья; NgIf может быть более безопасным выбором. Всегда измеряйте, прежде чем делать поспешные выводы.

Проверьте пример ниже:

@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;
  }

}

Плункер: http://plnkr.co/edit/7b1eWgSHiM1QV6vDUAB0

Для дальнейшего чтения [hidden], я указываю эту статью: http://angularjs.blogspot.com.br/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

Надеюсь, это поможет.

Автор: Alexandre Junges Размещён: 19.07.2016 01:32
Вопросы из категории :
32x32