在 Angular 7 中,组件之间的交互可以通过以下几种方式实现:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
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: `
Child Component
{{ message }}
`,
})
export class ChildComponent {
@Input() message: string;
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit("Message from child");
}
}
共享服务:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new Subject();
message$ = this.messageSource.asObservable();
sendMessage(message: string) {
this.messageSource.next(message);
}
}
父组件:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-parent',
template: `
Parent Component
{{ message }}
`,
})
export class ParentComponent implements OnInit {
message: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.message$.subscribe(message => this.message = message);
}
sendMessage() {
this.dataService.sendMessage("Message from parent");
}
}
子组件:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-child',
template: `
Child Component
{{ message }}
`,
})
export class ChildComponent implements OnInit {
message: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.message$.subscribe(message => this.message = message);
}
sendMessage() {
this.dataService.sendMessage("Message from child");
}
}
以上是两种常用的组件交互设计方法,可以根据具体需求选择适合的方式。