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

1

Я борюсь с вызовом бэкэнда с угловой. Когда я создаю компонент, я также получаю параметр "категория" из 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 в бэкэнде, он говорит, что он нулевой. Но это не так, это правильная ценность.

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

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})
        })
    }
})
  • 0
    Посмотрите на этот пост, он может решить вашу проблему stackoverflow.com/questions/53598764/…
  • 0
    Давайте решим это один за другим. Сначала переместите получение кода параметра в начало ngOnInit() .
Показать ещё 3 комментария
Теги:
angular

1 ответ

3
Лучший ответ

Просмотрите эту статью: Todd MoTTo: угловой конструктор против 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();
}

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

// 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();
}
Поделиться
  • 0
    Это нормально, если я переместил код из ngOnInit в функцию, которую я вызвал из конструктора внутри подписки?
  • 0
    Я не совсем уверен, что вы спрашиваете. Дело в том, что конструктор может быть вызван намного раньше, чем завершен route.params, который при запуске в конструкторе даст вам немедленное значение route.params: undefined. Вам нужно использовать хук ngOnInit, так как он будет работать после установки параметров вашего маршрута.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню