如何在ngb-pagination的href属性中添加url答案

【问题标题】：how to add url in href attribute in ngb-pagination如何在ngb-pagination的href属性中添加url
【发布时间】：2021-02-25 15:03:02
【问题描述】：

对于我的博客网站，我使用来自 ng-bootstrap Angular 包的 ngb-pagination。我希望能够在分页组件的<a> 标记中的 href 属性中设置绝对 url。以便爬虫知道该网址。请有人帮忙。提前致谢。

<ngb-pagination
  class="d-flex justify-content-center"
  [pageSize]="pageSize"
  [collectionSize]="collectionSize"
  [maxSize]="5"
  [boundaryLinks]="false"
  [ellipses]="false"
  [rotate]="true"
  [(page)]="page"
></ngb-pagination>

【问题讨论】：

您假设分页中的每个页面都有不同的 URL，我认为情况并非如此。
你可以看这里justinmind.com/blog分页中的每个页面都有不同的URL。
您确定这是使用ngb-pagination 元素完成的吗？
不，但我想使用 ngb-pagination 来达到同样的效果。可能吗？
我觉得不像你想的那么容易。该分页中的每个按钮都必须是 <a href> 或至少是操纵 url 的东西，然后您需要放置一个路由机制来告诉您的 Angular 应用程序如果有人打开您的特定页面的 url 会发生什么.阅读路由here。但是，我想知道为什么您首先要为这些页面设置单独的 url。 angular的本意是单页应用，爬虫当然可以找到它的url

标签： angular

【解决方案1】：

如果有人在寻找答案，我就是这样做的。

我通过扩展类 NgbPagination 创建了一个名为自定义分页器的新 Angular 组件，并在自定义分页器模板中粘贴了 NgbPagination 模板中可用的任何内容。要在<a> 标签中添加href，我已经按照模板中的要求进行了修改，它按预期工作。

更新

以防万一有人在寻找代码以获得更清晰的信息。下面是我扩展 3rd 方库的组件代码

export class CustomPaginatorComponent extends NgbPagination {
  @Input('href') baseUrl: string;
  @Input('category') category: string;
  @Input('subCategory') subCategory: string;

  getHrefUrl(pageNumber: number) {
  // your logic here
    return hrefUrl;
  }
}

复制您扩展的第 3 方库的模板代码并将其粘贴到这个新创建的组件 CustomPaginatorComponent 的模板中，并根据您的需要在模板中进行修改。就我而言，我添加了一个名为“getHrefUrl”的新函数来获取组件中的 href url，并在模板中使用它，如下所示。希望这会有所帮助。

    <a
      aria-label="Previous"
      i18n-aria-label="@@ngb.pagination.previous-aria"
      class="page-link"
      href="{{ getHrefUrl(page - 1) }}"
      [attr.tabindex]="previousDisabled() ? '-1' : null"
      [attr.aria-disabled]="previousDisabled() ? 'true' : null"
    >

【讨论】：

你能分享一下你是怎么处理的吗？我面临同样的问题。
@Shakir - 有点延迟，但我现在添加了代码。希望这对您有所帮助。