Question

我正在尝试这样做，以便当我点击下面的一个解决方案链接（例如解决方案/点击）时，页面会滚动到页面上的该元素。

  <li><a routerLink="/solutions" routerLinkActive="active"  class="main-links separate highlight">{{'NAVIGATION_SOLUTIONS'|translate}}</a>
                    <ul class="nav-dropdown set-width items">
                        <li><a routerLink="/solutions/click">{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li>
                        <li><a routerLink="/solutions/returns">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li>
                        <li><a routerLink="/solutions/aisle">{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li>
                        <li><a routerLink="/solutions/store">{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li>
                        <li><a routerLink="/solutions/customer">{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li>
                        <li><a routerLink="/solutions/partner">{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li>
                    </ul>
                </li>

以下是我的路线：

const appRoutes: Routes = [
  { path: 'homepage', component: HomepageComponent},
  { path: 'homepage/:id', component: HomepageComponent},
  { path: 'solutions', component: SolutionsComponent},
  { path: 'solutions/:id', component: SolutionsComponent},
  { path: 'work', component: WorkComponent }
];

这是我坚持的部分。我已经让它识别id（例如点击，返回等）。但我无法弄清楚如何让页面滚动到元素。有谁知道我应该在这做什么？（对不起，如果这是一个愚蠢的问题，我上周只使用Angular并感到非常困惑）

 ngOnInit() {    
    this.route.params
    .map(params => params['id'])
    .subscribe((id) => {
      this.scrollTo(id)
      console.log(id);
    });
  }

  scrollTo(id: string) {


  }

Answer 1

我建议使用第三方模块来达到您想要的效果。您可以结帐ngx-page-scroll。

一旦检索到要滚动到的ID，就可以使用模块中的PageScrollService开始滚动动画到所需的锚点。您必须将ids提供给SolutionsComponent中的每个子组件。请注意，这些应与您在链接中单击的ID相匹配。然后，您可以使用PageScrollService's start方法开始滚动。您可以通过以下链接查看完整的详细示例（和导入）：https://github.com/Nolanus/ngx-page-scroll#service

以下是一个示例代码，可让您了解需要执行的操作

//solutions.component.ts
constructor(
    private pageScrollService: PageScrollService, @Inject(DOCUMENT) 
    private document: any) {}

ngOnInit() {    
    this.route.params
    .map(params => params['id'])
    .subscribe((id) => {
      this.scrollTo(id)
      console.log(id);
    });
  }

scrollTo(id: string) {
     let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, '#' + id);
     this.pageScrollService.start(pageScrollInstance);
  }


//solutions.component.html
 <div id="aisle">
    ...
 </div>
 <div id="returns">
    ...
 </div>
 ...

角度路由滚动到元素

1 个答案: