Двусторонняя привязка данных между компонентами в Angular 8

Создавая angular, будь то крупномасштабное корпоративное приложение или просто небольшой побочный проект, вы обязательно окажетесь на стадии, требующей двусторонней привязки данных. Обычно для небольших приложений вы можете использовать переменную данных в одном и том же компоненте, но по мере увеличения кода и требований могут возникнуть сценарии, в которых вам потребуется использовать одни и те же или несколько переменных для разных компонентов в рамках проекта.

Когда дело доходит до привязки, Angular предлагает в основном три разных метода.

• Привязка собственности - - ›[]
• Привязка событий - - ›()
• Двусторонняя привязка (комбинация двух вышеперечисленных) - - ›[()] - -› это также называется «Банан в коробке»

Давайте попробуем разобраться в этом на примере, в котором мы манипулируем переменной accountBalance. Мы будем использовать родительский и дочерний компоненты; от родителя вы можете кредитовать сумму на 10, а от ребенка вы можете списать ту же сумму.

Привязка свойств и привязка событий

Во-первых, давайте определим наш родительский компонент.

// parent_component.component.ts
@Component({
  selector: 'parent_component',
  templateUrl: './parent_component.component.html',
  styleUrls: ['./parent_component.component.css']
})
export class ParentComponent implements OnInit {
    
    accountBalance : any;
    ngOnInit() {
       this.accountBalance = 500;
    }
    creditAccountBalance()
    {
        this.accountBalance += 10;
    }      
}

Здесь accountBalance - это переменная, объявленная внутри родительского компонента, мы передадим эту переменную дочернему компоненту внутри селекторов компонентов.

// parent_component.component.html
<span> Balance Amount : {{accountBalance}} </span>
<button (click)=creditAccountBalance()> Add Amount </button>
<child_component [accountBalance]="accountBalance"> </child_component>

Если переменная компонента передается как атрибут Html (как в последней строке), это называется привязкой свойства.

Чтобы angular вызывал некоторый код при выполнении действия / события, мы используем привязку изменения события. Классическим примером привязки события является нажатие / изменение, которое мы также использовали в приведенном выше примере.

Теперь давайте определим наш дочерний компонент с функцией для списания баланса счета на 10. Дочерний компонент может прослушивать переменную, привязанную к свойству, с помощью декоратора @Input ().

// child_component.component.ts
@Component({
  selector: 'child_component',
  templateUrl: './child_component.component.html',
  styleUrls: ['./child_component.component.css']
})
export class ChildComponent implements OnInit {
    @Input('accountBalance') accountBalance: any;
    debitAccountBalance()
    {
        this.accountBalance -= 10;
    }      
}
// child_component.component.html
<button (click)=debitAccountBalance()> Debit Amount </button>

Здесь количество будет уменьшено на 10, но, поскольку привязка свойств обеспечивает только однонаправленную привязку, то есть изменение, сделанное из родительского контроллера, будет распознаваться внутри дочернего контроллера, но не наоборот. Таким образом, дебетованное значение accountBalance не будет отражено в родительском компоненте.

Двусторонняя привязка

Чтобы решить проблему, о которой говорилось выше, нам потребуется использовать метод Банан в коробке. Но перед этим давайте разберемся, как можно написать собственные функции привязки событий. Во-первых, нам нужно немного изменить родительский Html.

// parent_component.component.html
<span> Balance Amount : {{accountBalance}} </span>
<button (click)=creditAccountBalance()> Add Amount </button>
<child_component [accountBalance]="accountBalance" (accountBalanceChange)="this.accountBalance= $event"> </child_component>

Чтобы транслировать это событие, нам также необходимо связать событие внутри дочернего компонента с помощью декоратора @OUTPUT.

// child_component.component.ts
@Component({
  selector: 'child_component',
  templateUrl: './child_component.component.html',
  styleUrls: ['./child_component.component.css']
})
export class ChildComponent implements OnInit {
    @Input('accountBalance') accountBalance: any;
    @Output() accountBalanceChange = new EventEmitter();
debitAccountBalance()
    {
        this.accountBalance -= 10;
        this.accountBalanceChange.emit(this.accountBalance);
    }      
}

Эта сумма, списанная с дочернего компонента, также будет подтверждена внутри родительского компонента. Лучше написать такую ​​же привязку, но с использованием BANANA IN THE BOX [🍌], ​​будет примерно так.

// parent_component.component.html
<span> Balance Amount : {{accountBalance}} </span>
<button (click)=creditAccountBalance()> Add Amount </button>
<child_component [accountBalance]="accountBalance" [(accountBalance)]="accountBalance"> </child_component>

Синтаксис [()] легко продемонстрировать, если у элемента есть настраиваемое свойство с именем x и соответствующее событие с именем xChange.

Браввоооооо… вот как достигается двусторонняя связь между компонентами. Кроме того, вы можете добавить другие дочерние компоненты, и изменение значения внутри одного будет подтверждено среди других дочерних и родительских компонентов.

Надеюсь, эта статья оказалась полезной !!