Блог

Я пытаюсь выполнить некоторые операции с данными, которые я извлекаю HttpClient , а затем перенаправить страницу после выполнения этих операций. По-видимому, я не могу использовать then для этого, но я не могу найти, как еще перенаправить страницу после выполнения операций. В противном случае, если я попытаюсь запустить операции и маршрутизацию в одной и той же функции, страница, похоже, попытается выполнить маршрутизацию до выполнения других операций.

Вот мой код:

 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { NbAuthSocialLink } from '@nebular/auth';
import { NbAuthService } from '@nebular/auth';
import { DataService } from '../@core/utils/data.service';

@Component({
  selector: 'ngx-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  
  constructor(
    private dataService : DataService,
    private router : Router
    ){}


  ngOnInit(){
    
  }

  textAnalysis(name, text){
    this.dataService.sendText(text).subscribe((data: any[])=>{
        
            console.log(data)

            localStorage.setItem('user_name', name)

            localStorage.setItem('insights', JSON.stringify(data)); 

            console.log('localStorage json stringified object item set to: insights')

            console.log("<----------test: should output 'Imagination'---------->")

            console.log(data['personality'][0]['children'][3]['name'])  
        
    }).then(() => {
            this.router.navigate(['/pages']);
        })   
    
    }  
  }
}
  

и DataService функция:

  
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';



const httpOptions = {
};

declare var google: any;




@Injectable({
  providedIn: 'root',
})


export class DataService {

 

  constructor(private http: HttpClient) { }
 
  public sendText(data){
    return this.http.post("//localhost:8000/personalityFromText", data, {withCredentials: true});
  }
  

Вам не нужно реализовывать блок then, просто поместите свою навигацию в блок успеха подписки.

      textAnalysis(name, text){
        this.dataService.sendText(text).subscribe((data: any[])=>{
    
        console.log(data)

        localStorage.setItem('user_name', name)

        localStorage.setItem('insights', JSON.stringify(data)); 

        console.log('localStorage json stringified object item set to: insights')

        console.log("<----------test: should output 'Imagination'---------->")

        console.log(data['personality'][0]['children'][3]['name'])  
        this.router.navigate(['/pages']);
    
});
  

HttpClient является наблюдаемым, а не обещанием, поэтому вам нужно будет выполнить это с помощью канала, думайте как цепочки шагов, например, так:

 this.dataService.sendText(text).pipe(
    tap(data => localStorage.setItem('user_name', name)),
    tap(data => localStorage.setItem('insights', JSON.stringify(data))),
).subscribe(
    (data) => this.router.navigate(['/pages']),
    (error) => console.error(error)
);
  

Существует несколько комбинаций, возможных с использованием других операторов, кроме tap, о которых вы можете прочитать подробнее.