angular如何组件传值

在 Angular 中，组件之间传递数据可以通过输入属性（@Input）、输出属性（@Output）和服务（Service）来实现。

1. 输入属性（@Input）

在父组件中通过属性绑定的方式将数据传递给子组件，子组件通过 @Input 装饰器来接收数据。

父组件：

<app-child [message]="parentMessage"></app-child>

export class ParentComponent {
  parentMessage = 'Message from parent';
}

子组件：

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

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

2. 输出属性（@Output）

在子组件中通过 EventEmitter 发出事件，父组件通过事件绑定的方式来接收数据。

子组件：

import { Component, EventEmitter, Output } 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('Message from child');
  }
}

父组件：

<app-child (messageEvent)="receiveMessage($event)"></app-child>

export class ParentComponent {
  receiveMessage(message: string) {
    console.log(message);
  }
}

3. 服务（Service）

通过服务来实现组件之间的数据传递，可以在服务中定义一个公共的数据变量，然后在需要访问该数据的组件中注入该服务。

服务：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  message = 'Message from service';
}

组件：

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

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

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.message = this.dataService.message;
  }
}