nuclear_kote
@nuclear_kote

Как изменять @input свойство в компоненте, чтобы не терялся биндинг?

Есть у меня какой то такой компонент:
<div class="a">
   <div class="b" *ngIf="shown">blabla</div>
   <button (click)="onClick()">test</button>
</div>


@Component({
    selector: 'my-component'
})
export class MyComponent {
    @Input
    shown: boolean;
    onClick():void {
        this.shown = false;
    }
}


<my-component [shown]="property"></my-component>

Проблема в том что если срабатывает onClick и свойство shown выставляется в false в компоненте биндинг на property отваливается.

Как это можно исправить по нормальному?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
Нужно сделать двустороннее связывание.
@Component({
    selector: 'my-component'
})
export class MyComponent {
    @Input()
    shown: boolean;
    @Output()
    shownChange = new EventEmitter<boolean>();
    onClick():void {
        this.shown = false;
        this.shownChange.emit(this.shown);
    }
}

<my-component [(shown)]="property"></my-component>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы