在 Angular 7 中，将数据从一个组件传递到另一个组件时，我是否使用服务并在接收组件中订阅/监听?

Question

我是 Angular 7 的新手，我想知道我是否走在正确的道路上。

我有一个"警报"组件，它只在顶部的页面上显示一个 boostrap 警报框。 我希望能够调用此警报并从任何组件显示它。

我很确定我需要一个可以调用的服务来传递消息，然后让警报组件订阅该服务以侦听传入的消息？

到目前为止，我可以调用该服务并向其传递一条"消息"，我只是不知道如何在警报组件中订阅/收听(我认为这是正确的术语(以侦听要显示的传入消息。

例如，登录组件

constructor(public authService: AuthService, private router: Router, private alert: AlertService) {}
login() {
this.authService.login(this.model).subscribe(next => {
this.alert.success('Logged in successfully');
}, error => {
this.alert.failure('Log in failed');
}, () => {
// do something else
});
}

然后这是我的服务

例如警报服务

import {
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AlertService {
constructor() {}
success(message: string) {
// do something here?
}
error(message: string) {
// do something here?
}
}

然后我有我的警报组件，但不确定我将如何订阅/侦听从警报服务显示的传入消息。

例如 AlertComponent.ts

export class AlertComponent implements OnInit {
dismissible = true;
alerts: any[];
constructor() { }
ngOnInit() {
this.add();
}
// do something here to subscribe/listen to incoming messages from the service??
add(): void {
this.alerts.push({
type: 'info',
msg: `This alert will be closed in 5 seconds (added: ${new Date().toLocaleTimeString()})`,
timeout: 5000
});
}

}

和 HTML

<div *ngFor="let alert of alerts">
<alert [type]="alert.type" [dismissible]="dismissible" [dismissOnTimeout]="alert.timeout">{{ alert.msg }}</alert>
</div>

Answer 1

你也可以阅读 Angular Dependency Injection。 要在某个组件中提供可注入的服务，您必须将其构造函数并让 Angular DI 提供它： AlertComponent 的构建者应该有：

constructor ( private/proteced alertService:AlertService) { 
alertService.subsribe ((par)=> {
this.add(par); 
...})
}

Answer 2

你有很多东西要学。这只是懒惰的示例，每次都可以观察到覆盖。这不是一个完美的代码，但展示了一点点可观察量是如何工作的。

警报服务：

import {
Injectable
} from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AlertService {
alerts: Observable<any>
constructor() { }
success(message: any) {
this.alerts = of(message)
}
error(message: string) {
this.alerts = of(message)
}
}

显示警报的 Allert 组件：

export class AlertComponent implements OnInit {
dismissible = true;
// just inject service
constructor(public alerts$: AlertService) { }
ngOnInit() {
}
}

模板：

<div *ngIf="alerts$ | async as alerts"> <!-- | async is an pipe it will subscribe for you. importat for observables to first be in *ngIf then in *ngFor loops-->
<ng-container *ngFor="let item of alerts">
<alert[type]="alert.type"[dismissible]="dismissible" [dismissOnTimeout]="alert.timeout"> {{ item }}</alert>
</ng-container>
</div>

任何组件中的命令触发警报 您需要：

login() {
this.authService.login(this.model).subscribe(next => {
this.alert.success({ type: 'info', timeout: '5000', msg: "Success!"});
}, error => {
this.alert.failure({ type: 'info', timeout: '5000', msg: "Success!"}); // `this function u can delete meend failure just succes refactor to 'open'`
}, () => {
// do something else
});
}

关于服务 您需要记住在app.module.ts或任何其他模块(如providers: [AlertService](中提供它们 因此，应用程序将知道这是一项服务。你把他们注射到你上课的地方constructor().注入时，您需要为它们设置一个范围，例如"私有公共或受保护"，否则您最终会在类型或服务类中获得常规变量。

关于可观察量：

有无穷无尽的可观察量，当您订阅它们时，您需要取消订阅，在互联网上的某个地方阅读它。| async如果变量是无限循环，管道将为您完成此操作。