Comment implémenter l'interaction des composants dans Angular2

Cet article présente principalement la méthode de mise en œuvre de l'interaction des composants dans Angular2, et résume et analyse les techniques de fonctionnement et les précautions associées pour l'interaction des composants dans Angular2 sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

. Les exemples de cet article décrivent la méthode d'implémentation d'Angular2 pour l'interaction des composants. Partagez-le avec tout le monde pour votre référence, comme suit :

Avant-propos

Dans le développement angulaire, nous impliquons souvent l'interaction entre les composants, par exemple , nous référencerons des composants développés par notre propre département
Parfois, nous devons lier certaines données au composant référencé, ou nous avons besoin du sous-composant référencé pour générer certaines données
À ce stade, nous devons gérer le relation entre les composants. Interaction entre

Code clé pour l'interaction des composants

Le composant parent lie les données au composant enfant

Sous-composant

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

Composant parent

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

Le @Input du sous-composant indique ici qu'il a besoin de l'entité héros plus tard, lorsque le composant parent introduit le sous-composant. , il doit être dans le sous-composant. Écrivez hero dans la balise du composant et attribuez une valeur à hero dans votre propre composant pour lier les données du composant parent au composant enfant

Le composant parent écoute les événements. du composant enfant

Composant enfant

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

Composant parent

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

Le @Output du composant enfant indique qu'il utilisera la méthode onVoted pour transmettre une valeur booléenne au composant parent. Une fois que le composant parent a introduit le composant enfant, en liant la méthode du sous-composant à votre propre méthode, vous pouvez obtenir l'effet de surveillance du sous-composant

setter intercepte les modifications. dans les valeurs d'attribut d'entrée

sous-composant

<h3>"{{name}}"</h3>
private _name = &#39;&#39;;
@Input()
set name(name: string) { this._name = (name && name.trim()) || &#39;<no name set>&#39;; }
get name(): string { return this._name; }

Composant parent

<name-child [name]="myname"></name-child>

Une fois que le composant parent fait référence au composant enfant, il lie les données au composant enfant . Le composant enfant modifie et affiche les données transmises par le composant parent via set et get

Le composant parent et le composant enfant interagissent via des variables locales

Composant enfant

seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }

Composant parent

<button (click)="timer.stop()">Stop</button>
<p class="seconds">{{timer.seconds}}</p>
<countdown-timer #timer></countdown-timer>

Enfant Le composant définit des variables et des méthodes. Une fois que le composant parent fait référence à l'étiquette du sous-composant, il crée une variable locale dans l'étiquette pour représenter le sous-composant. -component. Ensuite, les variables et les méthodes du sous-composant sont accessibles via la variable

Ce qui précède est ce que j'ai compilé. Tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter le tri orderBy et la requête floue dans Angular

vue vuex vue-rouert routage des autorisations (tutoriel détaillé )

Comment obtenir le keyCode du clavier en javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!