Angular父子组件以及非父子组件之间的通讯.pdf

Angular 父子组件之间的通讯 Angular 是一个基于 TypeScript 的前端框架，提供了多种方式来实现组件之间的通讯。在实际应用中，父子组件之间的通讯是非常常见的。本文将详细介绍 Angular 中父子组件之间的通讯方式，以及非父子组件之间的通讯方式。 一、 父组件给子组件传值-@Input 在 Angular 中，父组件可以通过 @Input 将数据传递给子组件。这种方式可以实现父组件向子组件传递简单的数据，也可以传递整个父组件的实例。例如，在父组件中可以使用以下代码将数据传递给子组件： ```html <app-header [msg]="msg"></app-header> ``` 在子组件中，可以使用 @Input 装饰器来接收父组件传递的数据： ```typescript import { Component, OnInit, Input } from '@angular/core'; export class HeaderComponent implements OnInit { @Input() msg: string; constructor() { } ngOnInit() { } } ``` 然后，在子组件的模板中，可以使用父组件传递的数据： ```html <h2>这是头部组件--{{msg}}</h2> ``` 二、 子组件通过@Output 触发父组件的方法 在 Angular 中，子组件可以通过 @Output 触发父组件的方法。这种方式可以实现子组件向父组件传递数据或触发父组件的方法。例如，在子组件中可以使用以下代码： ```typescript import { Component, OnInit, Output, EventEmitter } from '@angular/core'; export class HeaderComponent implements OnInit { @Output() private outer = new EventEmitter<string>(); sendParent() { this.outer.emit('msg from child'); } } ``` 然后，在父组件中，可以使用以下代码来接收子组件传递的数据： ```html <app-header (outer)="runParent($event)"></app-header> ``` 在父组件中，可以使用以下代码来接收子组件传递的数据： ```typescript runParent(msg: string) { alert(msg); } ``` 三、 父组件通过@ViewChild 主动获取子组件的数据和方法 在 Angular 中，父组件可以通过 @ViewChild 主动获取子组件的数据和方法。这种方式可以实现父组件主动获取子组件的数据或方法。例如，在父组件中可以使用以下代码： ```html <app-footer #footerChild></app-footer> ``` 然后，在父组件中，可以使用以下代码来获取子组件的实例： ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; export class ParentComponent implements OnInit { @ViewChild('footerChild') footer; run() { this.footer.footerRun(); } } ``` 四、 非父子组件通讯 在 Angular 中，如果不是父子组件之间的通讯，可以使用公共的服务或 LocalStorage 来实现通讯。例如，可以创建一个公共的服务： ```typescript import { Injectable } from '@angular/core'; @Injectable() export class CommonService { private data: string; setData(data: string) { this.data = data; } getData() { return this.data; } } ``` 然后，在需要通讯的组件中，可以 inject 这个服务： ```typescript import { Component, OnInit } from '@angular/core'; import { CommonService } from './common.service'; export class ComponentA implements OnInit { constructor(private commonService: CommonService) { } sendData() { this.commonService.setData('data from A'); } } export class ComponentB implements OnInit { constructor(private commonService: CommonService) { } receiveData() { console.log(this.commonService.getData()); } } ``` 或者，可以使用 LocalStorage 来实现通讯： ```typescript import { Component, OnInit } from '@angular/core'; export class ComponentA implements OnInit { sendData() { localStorage.setItem('data', 'data from A'); } } export class ComponentB implements OnInit { receiveData() { console.log(localStorage.getItem('data')); } } ``` Angular 提供了多种方式来实现组件之间的通讯，无论是父子组件之间还是非父子组件之间，总有适合的解决方案。