Угловой конструктор не устанавливает локальную переменную до вызова ngOnInit ()

Question

Я борюсь с вызовом бэкэнда от углового. Когда я создаю компонент, я также получаю параметр "категория" из URL-адреса, например:

export class ProductsComponent{

    productList = []
    category = ""

    $params;
    $products;

    constructor(
        private products: ProductsService,
        private route: ActivatedRoute
    ){}

    ngOnInit() {
        this.$params = this.route.params.subscribe(params => {
        this.category = params['category']
        });

        this.$products = this.products.products(this.category).subscribe(
            productList => {
                this.productList = productList.result
            },
            err => {
                console.log(err)
            }
        )
    }

    ngOnDestroy(){
        // DON'T FORGET TO UNSUBSCRIBE!!!
        this.$params.unsubscribe();
        this.$products.unsubscribe();
      }
}

Это работает хорошо, но теперь в ProductsService, где я вызываю http.get, я думаю, что он не работает нормально.

@Injectable()
export class ProductsService {
    constructor(private http: HttpClient, private router: Router) {}

    public products(category: string): Observable<any> {
        return this.http.get(`/products/getallproducts`, {headers: {'Content-Type': 'application/json'}, params: {'category': category}})
    }
}

Потому что, когда я пытаюсь зарегистрировать req.body.category в бэкэнде, он говорит, что он нулевой. Но это не так, это правильное значение.

Вот что я пытаюсь сделать в Узле:

products.get(('/getallproducts'), (req, res) => {
    let category = req.body.category;
    console.log("REQ" + req.body)

    if(category === "all") {
        ProductModel.findAll()
        .then(result => {
            res.json({result: result})
        })
        .catch(err => {
            res.json({error: err})
        })
    } else {
        ProductModel.findAll({
            where: {
                productsubcategory: category
            }
        })
        .then(result => {
            res.json({result: result})
        })
        .catch(err => {
            res.json({error: err})
        })
    }
})

Answer 1

Просмотрите эту статью: Тодд МоТо: угловой конструктор и ngOnInit

Затем переместите код конструктора в метод ngOnInit .

// Add these;
$params;
$products;

constructor(
  private products: ProductsService,
  private route: ActivatedRoute
){}

ngOnInit() {
  this.$params = this.route.params.subscribe(params => {
    this.category = params['category']
  });

  this.$products = this.products.products(this.category).subscribe(
    productList => {
      this.productList = productList.result
    },
    err => {
      console.log(err)
  });
}

ngOnDestroy(){
  // DON'T FORGET TO UNSUBSCRIBE!!!
  this.$params.unsubscribe();
  this.$products.unsubscribe();
}

Обновление : Я вижу, что вы делаете сейчас. Кажется, это немного отстает от меня. Сначала вы загружаете компонент, а затем переходите к GET некоторым внутренним данным. Если вы направляетесь к чему-то новому, требующему каких-то данных, попробуйте преобразователь. С помощью распознавателя вы можете получить новые данные об изменении маршрута. Это зависит от вас, если вы хотите приостановить распознаватель до тех пор, пока не получите данные (и у вас не будет указателя на нажатой ссылке), или покажете экран загрузки и дождитесь его. Но распознаватель загрузится при загрузке маршрута и опубликует результат. Затем прослушайте распознаватель, наблюдаемый в компоненте.

// In Routes
{
  path: 'products/:category',
  component: YourComponent,
  resolve: {
    data: ProductsResolver
  }
},// rest of routes.

@Injectable()

export class ProductsResolver implements Resolve<any> {

constructor(
  private http: HttpClient
){}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
  return this.http.get('/products/getallproducts',
    {
      headers: {
        'Content-Type': 'application/json'
      },
      params: {
        'category': route.params.category
      }
    });
}

И тогда компонент будет ...

$products;

constructor(
  private route: ActivatedRoute
){}

ngOnInit() {
  this.$products = this.route.data.subscribe(productList => {
    this.productList = productList.result;
  },
  err => {
    console.log(err)
  });
}

ngOnDestroy(){
  this.$products.unsubscribe();
}