Двухсторонняя привязка Angular2 +, чтобы при инициализации обновлялся одноуровневый элемент

Question

У меня 3-х компонентная структура.Родительский компонент имеет 2 массива: allItems и pagedItems.Компонент Pager имеет входное значение элементов и двустороннюю привязку pagedItems.Компонент таблицы имеет входное значение постраничных элементов.

Пример компонентов

export class Table {

    @Input()
    pagedItems: any[] = [];
    constructor() { }
}

export class Pager {
    items: any[];

    @Input()
    set items(value: any) {
        this._items = value;
        this.setPage(this.currentPage);
    }

    get items() {
        return this._items;
    }

    _pagedItems: any[];

    @Input()
    get pagedItems() {
        return this._pagedItems;
    }

    @Output() pagedItemsChange = new EventEmitter();

    set pagedItems(value) {
        this._pagedItems = value;
        this.pagedItemsChange.emit(this._pagedItems);
    }

    setPage(page: number) {

        this.pager = this.pagerService.getPager(this.items.length, page, parseInt(this._pageSize));
        this.pagedItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);

    }
}

export class Parent {

    allItems: any[] = [];
    pagedItems: any[] = [];

    ngOnInit() { this.getData(); }
    getData() {
        ajaxcall.then(data => {
            this.allItems = data;
        })
    }
}

А вот пример структуры HTML:

<table class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                                 [pagedItems]="pagedItems"
                                ></tbl-img-procurer-browser>

        <pager class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
               [items]="allItems" [(pagedItems)]="pagedItems"
         ></pager>

Когда я открываю родительский компонент, он вызывает getData () метод.Он получает данные с сервера и помещает их в массив allItems.Теперь пейджер получает массив и разбивает его на страницы.И заполняет массив pagedItems.Теперь, что должно произойти, это то, что компонент таблицы получает перемещаемые элементы и отображает их.Но на самом деле происходит то, что таблица никогда не получает данные.Теперь, если я изменю страницы на пейджере, таблица внезапно получит данные и начнет их показывать.Почему он не получает данные во время инициализации?

РЕДАКТИРОВАТЬ:

Сначала я подумал, что это ненужная часть информации, но с ответом, который дал Микерс, я думаю, что это необходимо.

У меня есть один дополнительный компонент, который обрабатывает форму поиска для таблицы.Этот компонент onInit создает событие, которое родитель прослушивает и использует данные из этого события для выполнения ajax-вызова getData ().Я не знаю, смогу ли я использовать решающую защиту здесь.

export class filter{

@Output("onSubmit") onSearch: EventEmitter<SearchInput> = new EventEmitter<SearchInput>();

ngOnInit(){
    this.onSubmit();
    this.onSubmit();
  }

getSearchInput(){
    let searchInput: SearchInput = new SearchInput(
      //collects data from search form.
    );

    return searchInput;
  }

onSubmit() {
    this.onSearch.emit(this.getSearchInput());
  }

}

Итак, структура на самом деле:

 <filter (onSubmit)="getData($event)"></filter>
 <table class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                                     [pagedItems]="pagedItems"
                                    ></tbl-img-procurer-browser>

            <pager class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                   [items]="allItems" [(pagedItems)]="pagedItems"
             ></pager>

Answer 1

Я могу привести пример того, как это реализовать.

Сначала необходимо обновить маршрутизатор (для работы этого исправления необходимо использовать маршрутизатор):

const HOME_ROUTE: Routes = [
  {
    path: 'home', // replace this with your route and component name
    component: HomeComponent,
    resolve: [HomeResolver] // this is where you implement the guard
  }
];

export default HOME_ROUTE;

Вот пример того, как будет выглядеть охранник:

@Injectable()
export class HomeResolver implements Resolve<string> {
  constructor(private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    console.log('home resolver fired');
    return of('true');
  }
}

Обновите ваш компонент, чтобы получить данные:

ngOnInit() {
    this.route.data.subscribe(({ str}) => {
        this.message= str;
    });
}

Надеюсь, это указывает вам правильное направление.