Comment implémenter la liaison de données bidirectionnelle dans Angular-js tutoriel-php.cn

Comment implémenter la liaison de données bidirectionnelle dans Angular

亚连

Libérer： 2018-06-21 16:58:11

original

1481 Les gens l'ont consulté

L'éditeur ci-dessous partagera avec vous un exemple de liaison de données bidirectionnelle utilisant des composants personnalisés Angular. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil.

Les étudiants qui ont étudié Angular savent tous que la zone de saisie permet d'obtenir une liaison de données bidirectionnelle via [(ngModel)] Les composants personnalisés peuvent également réaliser une liaison de données bidirectionnelle. ? La réponse est oui.

En Angular, nous devons souvent passer des crochets []<code>[] et des crochets ()()Réaliser l'interaction entre les composants :

Puis dans []<code>[] et (), comment implémenter la liaison de données bidirectionnelle des composants ? ()

Les exemples sont les suivants.

Sous-composant :

<!--testDataBinding.component.html-->

<h1>childStatus: {{childStatus}}</h1>

Copier après la connexion

//testDataBinding.component.ts

export class TestDataBindingComponent implements OnInit{
 @Input() childStatus;
 @Output() childStatusChange = new EventEmitter();
 ngOnInit(){
 setTimeout(()=>{
  this.childStatus = false;
  this.childStatusChange.emit(this.childStatus);
 },5000);
 }
}

Copier après la connexion

Faites attention à l'écriture ici. C'est la clé de la première moitié de la sortie. L'attribut doit être le même que l'attribut d'entrée. Les attributs d'entrée peuvent être nommés arbitrairement. L'attribut de sortie doit ajouter Change à l'attribut d'entrée. Par exemple, si votre attribut d'entrée est myData, alors l'attribut de sortie doit être. mesDonnéesChange.

Composant parent :

<!--app.component.html-->

<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>parentStatus: {{parentStatus}}</h1>

Copier après la connexion

//app.component.ts

import { Component,OnInit } from &#39;@angular/core&#39;;
@Component({
 selector: &#39;my-app&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent implements OnInit{
 parentStatus: boolean = true;
 ngOnInit(){
 setTimeout(()=>{
  this.parentStatus = true;
 },10000);
 }
}

Copier après la connexion

Dans le composant parent, nous initialisons

parentStatus est true<code>parentStatus et le transmet au composant enfant TestDataBindingComponent<code>true. TestDataBindingComponent

Dans le composant enfant, après 5 secondes, nous définissons childStatus sur false<code>childStatus pour voir s'il peut être transmis au composant parent. Après 5 secondes supplémentaires, nous définissons parentStatus<code>false sur  dans le composant parent true<code>parentStatus, voyez s'il peut être transmis au composant enfant. true

Il s'avère qu'après que la valeur du composant enfant change, la valeur du composant parent change également après que la valeur du composant parent change, le la valeur du composant enfant change également !

Nous avons mis en place une liaison bidirectionnelle !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.