javascript - 动态组件上的 Angular 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});
  }

week-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);
      });
  }

week-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>

asset-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);
    });
  }

}

所以我想做的是在动态创建的 Assets 页面上有一个下一个按钮，它会转到第 1 周页面列表中的下一个动态创建的 Assets 页面......就像我说的那样我什至没有确定这样的事情是否可行，但我们将不胜感激!如果您需要更多信息，请告诉我

谢谢

Answer 1

您想要做的是将 getProgramItems 的响应存储在某种状态管理服务中。甚至可能只是在获取数据的服务中。这样，一旦它被检索到，任何注入(inject)服务的组件都可以访问数据。然后，甚至可以将动态链接分离到一个指令中，您可以将其中一个程序项传递到该指令中。

在 Angular 中搜索状态管理服务。

如果您发现自己不得不在多个组件之间共享大量数据，我建议您研究一下像 NGRXStore 这样的工具。它将帮助您以一种非常干净高效的方式管理需要在应用程序的各个部分之间共享的 API 数据。