Angular 2在两个组件之间发送数据

Angular 2是一种流行的前端开发框架，用于构建单页应用程序。在Angular 2中，可以使用不同的方法在两个组件之间发送数据。

使用@Input和@Output装饰器：@Input装饰器用于将数据从父组件传递到子组件，而@Output装饰器用于将数据从子组件传递到父组件。通过在组件类中定义输入和输出属性，可以在组件之间进行数据传递。以下是一个示例：

父组件：

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

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

  receiveMessage($event) {
    console.log($event);
  }
}

子组件：

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

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

  sendMessage() {
    this.messageEvent.emit("Message from child");
  }
}

使用服务：可以创建一个共享服务，用于在组件之间共享数据。通过在服务中定义一个可观察对象或行为主题，可以在组件之间发送和接收数据。以下是一个示例：

共享服务：

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

@Injectable()
export class DataService {
  private messageSource = new BehaviorSubject<string>("Initial message");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

父组件：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `,
})
export class ParentComponent {
  message: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }

  sendMessage() {
    this.dataService.changeMessage("Message from parent");
  }
}

子组件：

import { Component } from '@angular/core';
import { DataService } from './data.service';

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

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }
}

这些方法可以在Angular 2中实现两个组件之间的数据传递。根据具体的业务需求和场景，选择适合的方法进行数据交流。

腾讯云相关产品和产品介绍链接地址：