Question

我不确定这是否可行，但是..我有一个页面，它引入了一个来自外部api的项目列表，所以页面上有5个元素，现在每个元素都是指向自己页面的链接，这是通过查询字符串生成dynmically，例如[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数据。

动态组件

1 个答案: