Javascript 动态组件上的Angular 5 next按钮

我不确定这是否可能，但是。。我有一个页面，它从外部api中引入了一个项目列表，因此页面上有5个元素，现在每个元素都是指向其自己页面的链接，该页面是通过查询字符串动态生成的，例如[routerLink]=['page'，item.fields.id]现在我想做的是在生成的页面上有一个下一步按钮，它将转到下一个生成的项目页面

我的设置如下

contenful.service.ts

这就建立了我的api调用

asset-page.component.ts

所以我想做的是在动态创建的资产页面上有一个下一步按钮，它从第一周页面的列表中转到下一个动态创建的资产页面。。。就像我说的，我甚至不确定这样的事情是否可行，但任何帮助都将不胜感激！如果你需要更多的信息，请告诉我

---

谢谢

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

在Angular中搜索状态管理服务

---

如果您发现自己必须在多个组件之间共享数据，我建议您使用NGRXStore之类的工具。它将帮助您以一种非常干净高效的方式管理需要在应用程序各部分之间共享的API数据。

我给出了一个例子，因为有1000个代表点看起来很奇怪：-1005看起来更合法：-

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

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

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

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

}