angular - 我如何在另一个服务中使用 AlertService(用于错误消息的 matsnackbar)?
问题描述
我正在尝试订阅服务中的 observable。但是,我需要AlertService
用于显示错误。另一个服务中的一个服务(循环依赖?)。
这是警报服务
@Injectable()
export class AlertService {
private subject = new Subject<any>();
private keepAfterNavigationChange = false;
constructor(private router: Router) {
// clear alert message on route change
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
if (this.keepAfterNavigationChange) {
// only keep for a single location change
this.keepAfterNavigationChange = false;
} else {
// clear alert
this.subject.next();
}
}
});
}
success(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({ type: 'success', text: message });
}
error(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({ type: 'error', text: message });
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
AlertService 变成了Mat Snackbar
on AlertComponent
。我在另一个组件上渲染这个快餐栏。
export class AlertComponent implements OnInit {
message: any;
constructor(private alertService: AlertService, public snackBar: MatSnackBar) { }
ngOnInit() {
// trigger Snackbar after AlertService is called
this.alertService.getMessage().subscribe(message => {
if (message != null) {
// there is a message to show, so change snackbar style to match the message type
if (message.type === 'error') {
this.snackBar.open(message.text, undefined, { duration: 8000, verticalPosition: 'bottom', panelClass: ['snackbar-error'] });
} else if (message.type === 'success') {
this.snackBar.open(message.text, undefined, { duration: 8000, verticalPosition: 'bottom', panelClass: ['snackbar-success'] });
} else {
this.snackBar.open(message.text, undefined, { duration: 8000, verticalPosition: 'bottom' });
}
}
});
}
}
我可以像这样订阅内部组件:
export class AboutComponent implements OnInit {
ngOnInit() {
this.emailService.sendEmail('example@gmail.com')
.subscribe(code => {
console.log(code);
this.alertService.success('Thanks for your message!');
}, error => {
this.alertService.error('Error sending message.');
}
);
}
}
@Injectable()
export class EmailService {
constructor(private http: HttpClient) { }
sendEmail(email: Email) {
return this.http.post(BACKEND_URL + 'send', email);
}
}
但是我试图订阅内部服务,因为EmailService
将在多个组件中使用。我怎样才能实现这种行为?
解决方案
你的服务可以注入到其他服务中
@Injectable()export class EmailService {
constructor(private http: HttpClient, private alertService: AlertService) { }
sendEmail(email: Email) {
return this.http.post(BACKEND_URL + 'send', email).map( result => this.alertService.alert(result););
}
}
如果 AlertService 使用 EmailService 并且 EmailService 使用 AlertService 将是循环的
推荐阅读
- mysql - MySQL 未知错误:重命名 3GB 表时为 -1(无外键)
- java - 如何在Java中的二维字符数组的mutator(setter)方法中传递值?
- qt - QML 启动外部程序:使用 QProcess 失败构建
- spring-boot - Spring Data MongoDB 无法使用我的存储库测试的@Transactional:无法为@Transactional 测试检索 PlatformTransactionManager
- lisp - 将文档字符串合并到 def* 宏中的正确方法?
- c# - 如何使用 Enum.GetValues() 方法的结果?
- python - 无法在 Ubuntu 中使用 Python 中的标准输入
- c++ - 我对 std::shared_ptr 删除器有疑问
- java - 如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段?
- javascript - 如何防止点击子元素触发点击它所在的标签?