在Angular 8中,组件之间的交互可以通过以下几种方式实现:
父组件可以通过@Input装饰器将数据传递给子组件,子组件可以通过@Output装饰器将数据传递回父组件。
在父组件中定义一个变量,然后将其通过@Input装饰器传递给子组件:
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Message from child: {{ childMessage }}
`
})
export class ParentComponent {
parentMessage = "Message from parent";
childMessage: string;
receiveMessage(message: string) {
this.childMessage = message;
}
}
在子组件中,使用@Input装饰器接收父组件传递的数据,并通过@Output装饰器将数据传递回父组件:
// 子组件
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Message from parent: {{ message }}
`
})
export class ChildComponent {
@Input() message: string;
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit("Message from child");
}
}
创建一个服务,在服务中定义一个变量,然后在需要共享数据的组件中注入该服务,并通过该服务进行数据传递。
// 服务
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
message: string;
}
// 父组件
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-parent',
template: `
Parent Component
Message from child: {{ dataService.message }}
`
})
export class ParentComponent {
constructor(private dataService: DataService) { }
}
// 子组件
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-child',
template: `
Child Component
Message from parent: {{ dataService.message }}
`
})
export class ChildComponent {
constructor(private dataService: DataService) { }
sendMessage() {
this.dataService.message = "Message from child";
}
}
通过路由导航到不同的组件,并通过路由参数传递数据。
在父组件中定义一个链接,将要传递的数据作为参数传递给子组件:
// 父组件模板
Go to Child
在子组件中获取路由参数:
// 子组件
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
template: `
Child Component
Message from parent: {{ message }}
`
})
export class ChildComponent implements OnInit {
message: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.message = params['message'];
});
}
}
以上是Angular 8中实现组件交互的一些方法,根据具体的需求可以选择适合的方法进行组件之间的交互。