Typescript 如何在没有插件的情况下以Angular 4 平滑滚动到页面锚点

我想要实现的是点击并平滑滚动到底部/指定的div区域，我用hashtag定义它，就像我认为它应该是这样.

下面是w3school示例中的一个实时示例，它是为JQuery:https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll编写的

我所做的就是从这个答案中窥视:Angular2 Routing with Hashtag to page anchor

但我不太明白答案，答案是这样的:

这部分是HTML部分:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

下面是路由.我应该把代码放在哪里？组成部分是吗？但是我如何访问这个功能呢？我应该执行(单击)吗？

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

在这下面，我得到了它，它应该写在我的组件中.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

"somepath"是什么意思？我应该在我的路由中添加一条路由.是吗？通常，我会在这里添加一条新路径，例如:

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

有人能给我提供HTML、routes和component的完整示例代码吗？