Блог

Главная - Вопросы по программированию - Angular показывает сообщение об успешном завершении отправки по другому маршруту

Angular показывает сообщение об успешном завершении отправки по другому маршруту

#json #angular #post #request

#json #angular #Публикация #запрос

Вопрос:

Я делаю http-сообщение с заголовком. После этого сообщения я перехожу к списку клиентов и хочу показать SuccesMessage, что запись включена. Как я могу отобразить сообщение на другом маршруте? Вот мой код:

 postData({
  let url = "api.url"
  var header = new HttpHeaders .... // etc.
  this.http.post(url, { company: this.form.value.company }, { headers (header)}).toPromise().then((data: any) => { console.group(data) })

После отправки маршрута на страницу отображается сообщение:

 this.router.navigate(['customer']);
this.showMsg = true;

Вот мой html

 <div *ngIf="showMsg">Success</div>

Но сообщение об успешном завершении не отображается. Почему? И что я должен делать? Большое вам спасибо за помощь!

Ответ №1:

Вам необходимо использовать объект совместного использования данных, такой как сервис. Например, у вас может быть служба, содержащая это:

   private msgSubject: BehaviorSubject<void> = new BehaviorSubject<void>(void 0);
  public msg$: Observable<void> = this.msgSubject.asObservable();
  
  showMsg(): void {
     this.msgSubject.next();
  }

затем в компоненте, к которому вы переходите после перенаправления, вам просто нужно внедрить сервис, а затем подписаться на наблюдаемый msg$ :

 this.msgService.msg$.subscribe(() => (this.showMsg = true));

Вам также нужно будет вызвать showMsg метод службы, как только ваш post будет успешным.

Комментарии:

1. Привет, Тим, большое тебе спасибо! Я пробовал код, но у меня возникли некоторые проблемы. Можете ли вы прислать мне немного больше помощи? На данный момент я создал имя службы «friends.service.ts». Как мне получить BehaviorSubject ? Было бы здорово, если бы вы могли прислать мне более подробную информацию об использовании.

2. в обоих компонентах, в том, который перед маршрутизацией, и в компоненте, к которому вы переходите, вы введете службу в конструктор: private friendsService: FriendsService. Затем в ngOnInit компонента, к которому вы переходите, вы подписываетесь на наблюдаемый msg $. В компоненте, где вы публикуете, где у вас есть router.navigate, вы добавляете this.friendsService.showMsg(). это вызовет подписку и покажет сообщение на вашем втором компоненте