Angular系列教程之父子组件通信详解

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

@[toc]

前言

在Angular应用程序开发中，父子组件通信是一项非常重要的功能。它允许不同层次的组件之间传递数据和进行交流。本文将详细介绍在Angular中实现父子组件通信的各种方法，并提供示例代码进行解释说明。

组件通信方法

在Angular中，有多种方法可以实现父子组件通信。

以下是几种常用的方法：

1. 输入属性（Input Properties）

输入属性是一种用于从父组件向子组件传递数据的方法。通过使用@Input()装饰器，我们可以在子组件中定义一个公共属性来接收来自父组件的数据。

示例代码如下：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{ message }}</p>'
})
export class ChildComponent {
  @Input() message: string;
}

在上述代码中，我们使用@Input()装饰器来定义了一个名为message的输入属性。在子组件的模板中，我们使用插值表达式{{ message }}来展示接收到的消息。

2. 输出属性（Output Properties）

输出属性允许子组件向父组件传递信息。通过使用事件触发器和@Output()装饰器，我们可以在子组件中定义一个事件，并在适当的时候将数据作为事件参数发送给父组件。

示例代码如下：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<button (click)="sendMessage()">Send Message</button>'
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child component');
  }
}

在上述代码中，我们定义了一个名为messageEvent的输出属性，并使用EventEmitter来创建一个新的事件。在子组件中，当用户点击按钮时，我们通过调用sendMessage()方法并使用emit()方法来触发messageEvent事件，并将一个字符串作为参数传递给父组件。

3. 服务（Services）

服务是一种共享数据和状态的有效方式。通过创建一个共享的服务，我们可以在任何组件之间传递数据和共享状态。组件可以通过依赖注入服务，并使用服务提供的方法和属性进行通信。

示例代码如下：

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  private message: string;

  setMessage(message: string) {
    this.message = message;
  }

  getMessage() {
    return this.message;
  }
}

在上述代码中，我们创建了一个名为DataService的服务，并在其中定义了一个私有的message属性和相应的设置和获取方法。通过在需要访问该数据的组件中注入DataService，我们可以在组件之间共享数据。

4. ViewChild与ContentChild

通过使用ViewChild和ContentChild装饰器，我们可以在父组件中获取对子组件的引用，并直接调用子组件的方法或访问其属性。这种方法适用于需要直接与子组件进行交互的情况。

示例代码如下：

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="callChildMethod()">Call Child Method</button>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  callChildMethod() {
    this.childComponent.childMethod();
  }
}

在上述代码中，我们使用@ViewChild()装饰器来获取对ChildComponent的引用，并将其赋值给childComponent属性。然后，在父组件的模板中，我们使用一个按钮来触发callChildMethod()方法，该方法会调用子组件中的childMethod()方法。

示例代码说明

现在，我们来看一个结合使用输入属性和输出属性的完整示例代码，以展示父子组件通信的实际应用。

首先，创建一个父组件ParentComponent，代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
    <p>{{ childMessage }}</p>
  `
})
export class ParentComponent {
  parentMessage = 'Hello from parent component';
  childMessage: string;

  receiveMessage($event) {
    this.childMessage = $event;
  }
}

在上述代码中，我们通过方括号语法[message]="parentMessage"将parentMessage数据绑定到子组件的输入属性上。同时，我们还使用事件绑定器(messageEvent)="receiveMessage($event)"来监听子组件发出的messageEvent事件，并调用receiveMessage($event)方法来接收子组件传递过来的消息。

然后，创建一个子组件ChildComponent，代码如下：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child component');
  }
}

在上述代码中，我们定义了一个名为message的输入属性，用于接收父组件传递的消息。并且，我们也定义了一个名为messageEvent的输出属性，用于向父组件发送消息。当用户点击按钮时，我们通过调用sendMessage()方法触发messageEvent事件，并将一条消息作为参数传递给父组件。

最后，在主模块中引入父组件和子组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [AppComponent, ParentComponent, ChildComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

通过以上示例代码，我们展示了使用输入属性和输出属性进行父子组件通信的实例。父组件向子组件传递数据，子组件将其显示在页面上，并且子组件可以通过事件触发器将消息发送回父组件。

结论

在Angular应用程序中，父子组件通信是一项重要的功能。本文详细介绍了几种常用的父子组件通信方法，包括输入属性、输出属性、服务和ViewChild与ContentChild。通过示例代码的解释说明，读者可以更好地理解如何在Angular中实现父子组件之间的通信。希望本文对您的学习有所帮助。