从Angular模块到应用程序组件的通信

Question

在我的Angular客户端中，我有一个模块调用库。它进行与账簿相关的CRUD交易。我在应用程序根目录中有一个警报组件和服务。该警报组件嵌套为应用程序组件中的视图子级。因此，一旦我执行CRUD操作，我就想从我的库模块通知根目录中的服务。

建立这种沟通的最简单方法是什么？

警报服务

import { Injectable } from '@angular/core';
//Alert service 
@Injectable({
providedIn: 'root'
})
export class AlertService {
//Attributes
show: boolean = false;
type: string = 'info';
message: string; 
timeoutTimer: any; 
//Constructor of the AlertService. 
constructor() { }

//Responsible for displaying the alert. 
displayAlert(message: string, type: string = 'info', autohide: number = 5000) {
this.show = true;
this.message = message;
this.type = type;

//If timer is already available
if (this.timeoutTimer) { 
clearTimeout(this.timeoutTimer);
}

//If autohide is there then start the timeout 
if (autohide) {
setTimeout(() => {this.close()}, autohide);
}
}

//Responsible for setting the show attribute false. 
close() {
this.show = false;
}

}

Answer 1

我将从Angular文档中选择一个示例来解释这一点。

export class HeroListComponent implements OnInit {
heroes: Hero[] = [];
selectedHero: Hero | undefined;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}

constructor(private service: HeroService)是将服务注入组件的地方。现在，您可以在组件内部访问HeroService的所有方法。因此，您可能希望在服务中创建一个方法，类似于alert(message) { doSomething }，然后在组件中调用service.alert("Hello")，通常是在执行CRUD操作的方法期间。查看ngOnInit((函数如何使用服务及其方法之一来更新组件中的数据。