Угловая 5 следующая кнопка на динамическом компоненте

Question

Я не уверен, если это вообще возможно, но.. У меня есть страница, которая вводит список элементов из внешнего API, поэтому на странице есть 5 элементов, теперь каждый элемент представляет собой ссылку на свою собственную страницу, которая генерируется через Строки запроса так, например, [routerLink]="['page', item.fields.id]" Теперь то, что я хочу сделать, это иметь следующую кнопку на сгенерированной странице, которая переходит к следующей странице сгенерированных элементов

Моя установка выглядит следующим образом...

contenful.service.ts

Так что это устанавливает мои вызовы API

 // Get all the program items
 getProgramItems(query?: object): Promise<Entry<any>[]> {
    return this.cdaClient.getEntries(Object.assign({
      content_type: CONFIG.contentTypeIds.programItems
    }, query))
    .then(res => res.items);
 }
 // Get only the program items with specified week
 getWeekItems(week: number): Promise<Entry<any>[]> {
    return this.getProgramItems({'fields.week': week});
 }

 // Get program with certain id
  getAsset(id: string): Promise<Entry<any>[]> {
    return this.getProgramItems({'sys.id': id});
  }

неделю-1.component.ts

Это когда я вызываю данные, а затем отображаю список элементов

export class Week1Component implements OnInit {
  private programItems: Entry<any>[] = [];
  private week1Items: Entry<any>[] = [];

  constructor(
    private contentfulService: ContentfulService
  ) { }

  ngOnInit() {
      this.contentfulService.getWeekItems(1)
      .then((week1Items) => {
        // set week1Items one and order them by sequenceOrder
        this.week1Items = _.orderBy(week1Items, ['fields.sequenceOrder'], ['asc']);
        })
      .then(() => {
        console.log(this.week1Items);
      });
  }

недельный 1.component.html

Здесь я отображаю элементы списка и routerLink где страница создается динамически

 <div class="program_card" *ngFor='let item of week1Items'>
      <span class="program_card_part-number">Part {{item.fields.sequenceOrder}}</span>
      <div class="program_card_title">
        <span class="program_card_title_main">{{item.fields.assetTypeHeading}}</span>
        <span class="program_card_title_sub">{{item.fields.title}}</span>
      </div>
      <div class="program_card_inner">
        <div [routerLink]="['asset', item.sys.id]" class="program_card_inner_icon_{{item.fields.assetType}}"></div>
        <img src="{{item.fields.overviewImage.fields.file.url}}">
      </div>
      <div *ngIf="item.fields.comment" class="program_card_comment">
          <div class="program_card_comment_radius-fix"></div>
          <img src="../../../assets/Images/image.jpg">
          <p>{{item.fields.comment}}</p>
      </div>
    </div>

актив-page.component.ts

export class AssetPageComponent implements OnInit {
  asset: Entry<any>[];

  constructor(
     private contentfulService: ContentfulService,
     private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.paramMap
    .switchMap((params: ParamMap) => this.contentfulService.getAsset(params.get('id')))
    .subscribe(asset => {
      this.asset = asset;
      console.log(this.asset);
    });
  }

}

так что я хочу сделать, чтобы на динамически создаваемой странице ресурсов была кнопка "Далее", которая переходит на следующую динамически созданную страницу ресурсов из списка на странице недели-1... как я уже сказал, я даже не уверен, что-то Как это возможно, но любая помощь будет оценена! и дайте мне знать, если вам нужна дополнительная информация

Спасибо

Answer 1

То, что вы хотели бы сделать, - это сохранить ответ от getProgramItems в какой-либо службе управления состоянием. Возможно, даже только внутри службы, которая извлекает данные. Таким образом, после извлечения любой компонент, внедряющий службу, может получить доступ к данным. Затем, возможно, даже разделите динамическую ссылку на директиву, в которую вы можете просто передать один из элементов программы.

Сделайте некоторые поиски государственных услуг управления в Angular.

Если вам часто приходится обмениваться данными между компонентами, я бы порекомендовал поискать такой инструмент, как NGRXStore. Это поможет вам управлять данными API, которые должны быть разделены между частями вашего приложения, очень простым и эффективным способом.