Comment les composants angulaires communiquent-ils ? 2 méthodes pour la communication des composants parent-enfant

Cet article vous amènera à comprendre la communication des composants dans Angular et à présenter les méthodes de communication entre les composants parents et enfants, ainsi que la communication entre les composants qui n'ont pas de relation directe.

Dans les applications réelles, nos composants seront liés dans une structure arborescente, donc la relation entre les composants est principalement :

• Relation père-enfant

• Relation frère

• Aucun Directement lié

[Recommandation de tutoriel associée : "tutoriel angulaire"]

Préparez notre environnement :

1 Créez un composant header : ng gc composants/en-tête<.><code>header组件: ng g c components/header

<app-button></app-button>
<app-title></app-title>
<app-button></app-button>

export class HeaderComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

2、创建一个title组件: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3、创建一个button组件: ng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

直接调用

适用于父子关系组件,注意点是直接调用使得父子组件的耦合性变高,要明确使用确实需要直接调用。

1、将我们的header组件挂载到app中,使得app和header之间形成父子组件关系

2、使用#为我们的组件起一个名称: <app-header></app-header>

3、现在我们的header组件还很空,我们扩展一下,要不然调用什么呢?

export class HeaderComponent implements OnInit {
  public name: string = 'HeaderComponent';

  printName(): void {
    console.log('component name is', this.name);
  }
}

4、组件扩展好以后我们就可以在父组件app中调用子组件header中的属性和函数了

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

5、第4步是在父组件的html模板中进行操作,有时候我们还需要在父组件的ts类中对子组件进行操作,我们接下来接着演示。

6、我们需要用到一个新的装饰器@ViewChild(Component)

export class AppComponent {
  title = 'angular-course';

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

	// 声明周期钩子: 组件及子组件视图更新后调用,执行一次
  ngAfterViewInit(): void {
    // 调用子组件属性
    console.log(this.header.name);
    // 调用子组件函数
    this.header.printName();
  }
}

@Input和@Output

适用于父子关系组件

1、我们通过在header组件中定义title,来解耦title组件中直接调用导致扩展复杂的问题

2、为title组件中的title属性增加@Input()装饰器: @Input() public title: string = '标题';

3、为header组件新增title属性并赋值: public title: string = '我是新标题';

4、我们再header组件的html模板中这样来使用title组件: <app-title></app-title>

5、一起看看到现在的效果吧,界面虽然丑,但是下次使用组件时title设置是不是方便一点呢?

6、以上步骤实现了父组件的数据传递到了子组件中,那么我们接着来看子组件的数据怎么传递到父组件中呢? 我们一起来用@Output()装饰器实现以下吧

7、在title组件的ts类中增加titleChange属性: @Output() public titleChange = new EventEmitter();

8、在title组件的ts类中定时派发数据

ngOnInit(): void {
  // 定时将子组件的数据进行派发
  setInterval(() => {
  	this.titleChange.emit(this.title);
	}, 1500);
}

9、现在我们来修改header父组件来接收派发来的数据:

<app-title 
	[title]="title" 
  (titleChange)="onChildTitleChange($event)">
</app-title>

onChildTitleChange(value: any) {
	console.log('onChildTitleChange: >>', value);
}

利用服务单利进行通信

适用于无直接关系组件

1、既然要通过服务来做通信,那我们就先创建一个服务吧: ng g s services/EventBus,并且我们声明了一个类型为Subject的属性来辅助通信

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  public eventBus: Subject<any> = new Subject();

  constructor() {}
}

2、我们为了省事就不重新创建组件了,因为我们的header中的按钮组件和title组件就符合没有直接关系的组件。

3、改造一下我们的button组件,并且添加点击事件来触发triggerEventBus函数

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

  public triggerEventBus(): void {
    this.eventBusService.eventBus.next('我是按钮组件');
  }
}

4、在title

export class TitleComponent implements OnInit {

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {
    this.eventBusService.eventBus.subscribe((value) => {
      console.log(value);
    });
  }
}

rrreee

2. Créez un composant title : ng g c components/title

rrreeerrreee3. Créez un boutonComposant : ng g c composants/boutonrrreeerrreee

L'appel direct

🎜🎜 convient aux composants de relation parent-enfant. Notez que l'appel direct augmente le couplage des composants parent-enfant, vous devez donc le faire. utilisez-le clairement. Il doit être appelé directement. 🎜🎜🎜1. Montez notre composant d'en-tête dans l'application afin qu'une relation de composant parent-enfant soit formée entre l'application et l'en-tête 🎜🎜2 Utilisez # pour donner un nom à notre composant : <. code> <app-header></app-header>🎜🎜3. Maintenant, notre composant d'en-tête est toujours vide. Sinon, comment devrions-nous l'appeler 🎜rrreee🎜4. Le composant est bien développé. À l'avenir, nous pourrons appeler les propriétés et les fonctions dans l'en-tête du sous-composant dans le composant parent app🎜rrreee🎜5. La quatrième étape consiste à opérer dans le modèle html du composant parent. nous devons le faire dans la classe ts du composant parent. Pour faire fonctionner les sous-composants, nous le démontrerons ensuite. 🎜🎜6. Nous devons utiliser un nouveau décorateur @ViewChild(Component)🎜rrreee🎜🎜🎜@Input et @Output🎜🎜🎜🎜🎜applicable aux composants de relation parent-enfant🎜🎜🎜1. Nous définissons title dans le composant header pour découpler le problème d'expansion complexe causé par les appels directs dans le composant title🎜🎜2. Ajoutez le décorateur @Input() à l'attribut title dans le composant >title : @Input() public title: string = 'title';🎜🎜 3. Ajoutez un attribut title au composant header et attribuez une valeur : public title: string = 'I am the new title';🎜🎜4. Passons au htmlheader /code>Utilisez le composant title dans le modèle comme ceci : <app-title>-title></app-title>🎜🎜5. Jetons un coup d'œil à l'effet jusqu'à présent. Bien que l'interface soit moche, sera-t-il plus pratique de définir title la prochaine fois lors de l'utilisation du composant ? 🎜🎜🎜6. Les étapes ci-dessus réalisent que les données du composant parent sont transmises au composant enfant. Les données du composant enfant sont transmises au composant parent ? Utilisons ensemble Le décorateur @Output() implémente ce qui suit 🎜🎜7 Ajoutez l'attribut titleChange à la classe ts. du composant title : @Output() public titleChange = new EventEmitter();🎜🎜8. Distribuez régulièrement les données dans la classe ts du title. code> composant🎜rrreee🎜9. Modifions maintenant le composant parent d'en-tête pour recevoir les données envoyées :🎜rrreeerrreee🎜🎜🎜Utiliser le service simple intérêt pour la communication🎜🎜🎜🎜🎜Applicable aux composants qui n'ont pas de relation directe🎜🎜🎜🎜🎜 1. Puisque nous voulons communiquer via des services, créons d'abord un service : ng g s services/EventBus , et nous déclarons un attribut de type Subject Communication auxiliaire🎜rrreee🎜2 Pour éviter les problèmes, nous ne recréerons pas les composants, car le composant bouton et le composant titre dans notre en-tête sont des composants qui ne sont pas directement liés. 🎜🎜3. Transformez notre composant <code>button et ajoutez un événement click pour déclencher la fonction triggerEventBus🎜rrreee🎜4. Acquisition de données🎜rrreee🎜🎜🎜Utilisez des cookies, des sessions ou un stockage local pour communiquer🎜🎜🎜🎜🎜🎜

1. C'est très simple. Nous utilisons toujours le composant title et le composant button pour la démonstration. Cette fois, nous sauvegardons les données dans le composant title et dans . Récupère les données du composant bouton. Montrons seulement le localstorage, tout le reste est pareil. title组件和button组件来做演示,这次我们在title组件中将数据保存,在button组件中获取数据。我们仅演示localstorage吧,其他都雷同的。

2、在title组件的ngOnInit()钩子中保存title到localstorage中: window.localStorage.setItem('title', this.title);

3、在button组件中获取数据: const title = window.localStorage.getItem('title');

2. Enregistrez title dans localstorage dans le hook ngOnInit() du composant title : window.localStorage.setItem('title', this.title);

3. Récupérez les données dans le composant bouton : const title = window.localStorage.getItem('title');

Conclusion :

Dans cet article, nous avons présenté la communication entre composants d'Angular, qui garantit que nos composants divisés communiquent raisonnablement. Jusqu'à présent, nous avons utilisé des composants en introduisant des balises de conduite.

Adresse originale : https://juejin.cn/post/6991471300837572638

Auteur : Xiaoxin

Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!