В Angular 7 при передаче данных от одного компонента к другому я использую сервис и подписываюсь / слушаю в получающем компоненте?

Question

Я новичок в Angular 7, и я хотел бы знать, нахожусь ли я на правильном пути.

У меня есть компонент 'alert', который просто отображает окно оповещения boostrap на странице ввершина. Я хочу иметь возможность вызывать это оповещение и отображать его из любого компонента.

Я почти уверен, что мне нужна служба, которую я могу вызвать, чтобы передать сообщение, а затем компонент оповещения подписаться на службу дляпрослушивать входящие сообщения?

Пока я могу позвонить в службу и передать ей «сообщение». Я просто не знаю, как подписаться / прослушать (я думаю, это правильная терминология) в компоненте оповещения для прослушивания. для отображения входящих сообщений.

ex. LoginComponent

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
  });
}

и вот мое служение

отл. AlertService

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, но я не уверен, как я буду подписываться / прослушивать входящие сообщения, отображаемые на AlertService.

ex. 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

Тебе нужно многому научиться. Это просто ленивый пример, потому что каждый раз перезаписывается наблюдаемый. Это не идеальный код, но немного показывает, как работают Observables.

Служба оповещений:

    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)
    }
}

Компонент оповещения, в котором отображается предупреждение:

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 Pipe сделает это за Вас, если переменная представляет собой бесконечный цикл.

Answer 2

Вы также можете прочитать Угловая инъекция зависимостей . Чтобы иметь доступный сервис для инъекций в каком-либо компоненте, вы должны поместить его в конструктор и позволить Angular DI предоставить его: Costructor of AlertComponent должен иметь:

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