0

Не уверен, но, похоже, проблема именно с маршрутизацией. До внедрения RouterModule все работало. Делаю поиск. Есть две компоненты - search и searchresult.

search.component.html

<input [(ngModel)]="query" type="text" placeholder="Поиск продукта...">
  <button (click)="link_search(query)">
    <mat-icon>search</mat-icon>
  </button>

search.component.ts

  link_search(search: string) {
    this.router.navigateByUrl('/searchresults/' + search);
}

search-result.component.ts

  ngOnInit() {
    this.query = this.route.snapshot.paramMap.get('query');        
    this.search(this.query);       
  }

метод search

search(query: string) {
      this.searchService.getDefault(query).subscribe(
        data => this.searchResult = data);            
  }

Данные из API приходят 100%, но после выполнения метода this.searchResult все равно пуст. Если вызвать метод поиска из компоненты search-result кнопкой (т.е. когда компонент уже проинициализирован) то данные в this.searchResult есть, правда не работает пагинация.

app-routing.module.ts

const routes: Routes = [
  { path: '', component: DefaultComponent },
  { path: 'searchresults/:query', component: SearchresultComponent },

Часть кода убрана, для читаемости (проверки и тд). Ангуляр изучаю недавно, возмонжо упускаю как-то базовый момент. Что делаю не так? Повторю, до добавления рутинга, когда внутри одной компоненты вызывал другую с передачей массива данных все работало как надо

9
  • если в subscribe сделать console.log(data) - что выводит консоль? 22 сен 2018 в 16:22
  • Артур, уже делал. Выводит ровно то, что надо, т.е. некий массив с данными. имхо, странность в том, что вызов метода из ngOnInit возвращает пустой массив. Если его же вызвать уже со страницы, то массив забит. При этом в обоих случаях в консоль приходит один и тот же набор данных, т.е. все отлично
    – Rans
    22 сен 2018 в 16:29
  • то есть если с DefaultComponent перейти на searchresults/qwerty, то в консоли ничего, а если сразу в урле ввести searchresults/qwerty, то данные есть в консоли? 22 сен 2018 в 16:39
  • Не совсем. В консоле всегда все хорошо, т.е. нужная инфа. Как переходить в компонент, не важно, в консоли будет инфа, в массиве нет. А если вызвать метод со страницы search-result.component.html типа так <button (click)="search('qwerty')"> <mat-icon>search</mat-icon> </button> то и в косоли будет инфа и в массиве
    – Rans
    22 сен 2018 в 16:44
  • 1
    HttpClientModule в imports надо, а не HttpClient 22 сен 2018 в 17:38

1 ответ 1

1

Давайте пройдемся поэтапно по вашей проблеме.

1) Когда вы пытаетесь перейти на один и тот же компонент, допустим в данный момент вы на /searchresults/aa, ввели что-то в инпут, кликаете на кнопку, запускается обработчик события в котором вызывается this.router.navigate(['searchresults', query]), то RouterOutlet не будет инициализировать этот компонент дважды или n раз, это называется reuse. То есть конструктор вызывается единожды вместе с крюками жизненного цикла, заканчивающиеся на Init (ngOnInit || ngAfterViewInit || etc.). В данном случае нужно делать подписку на смену параметров в URL:

import { OnDestroy } from '@angular/core';
import { Params } from '@angular/router';

import { Subject } from 'rxjs/Subject';
import { takeUntil } from 'rxjs/operators/takeUntil';

export class SearchresultComponent implements OnDestroy {
    private destroy$ = new Subject<void>();

    constructor(private route: ActivatedRoute) {
        this.route.params.pipe(takeUntil(this.destroy$)).subscribe(({ query }: Params) => {
            if (!query) {
                return;
            }

            this.search(query);
        });
    }

    public ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }

    // .... где-то тут ваш метод `search`
}

То есть каждый раз как в URL меняется параметр searchresults/:query - поток params генерирует событие и компонент об этом узнает, а далее вызывается ваш метод search.

2) Немного подкорректируем ваш метод search. На заметку: всегда конвертируйте HTTP потоки в Promise, поверьте, с этим НАМНОГО удобнее работать, в ближайшем будущем вы попробуете это на вкус.

public search(query: string): void {
    this.searchService.getDefault(query).toPromise().then((data) => {
        this.searchResult = data;

        if (!this.searchResult) {
            return;
        }

        this.length = this.searchResult.length;
        this.changePageEvent();
    }).catch((e: HttpErrorResponse) => {
        this.errorMessage = 'Empty results...';
        if (e.status === 204) {
            this.statusCode = e.status;
        }
    });
}

И вуаля - мы видим наши результаты при переходе с / URL.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.