路由问题 - 哈希标记 - Angular 2

Question

我试图将正常的bootstrap模板转换为angular网站.我面临的问题,而路由从一个页面导航到另一个喜欢About到Contact反之亦然.

该模板已经具有以下格式,使用一些css进行平滑滚动hashtag #.

我的app.compo.html

之前: <li><a href="#header">About</a></li>

之后: <li><a routerLink="/about" routerLinkActive="active" href="#header">About</a></li>

<a href="#header" id="btp" class="back-to-top btn-floating waves-effect waves-light btn-large custom-btn">
    <i class="ion-ios-arrow-up"></i>
</a>

app.routing.ts

const routes: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: about, data: { state: 'about'} },
  { path: 'contact', component: contact, data: { state: 'contact'} },
];
export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});

在我点击npm start之后,它在我的控制台中显示如下

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-04-05T05:55:06.359Z
Hash: 0bace8e39ad063fd5145
Time: 3614ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 46 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in Cannot read property 'length' of undefined

webpack: Failed to compile.

这是我第一次尝试角度2.我无法理解我的问题的官方文档和其他相关主题.

请指引我正确的方式.如果可能请分享一些plunker或stackblitz示例

Answer 1

这可以在不使用功能的情况下完成href hash (#)。

这是一个工作示例..

https://stackblitz.com/edit/angular-hxzu3s?embed=1&file=app/app.module.ts&view=preview

另一种方法是使用hash #

这是另一个工作示例..

https://stackblitz.com/edit/angular-ji6grr?embed=1&file=app/app.component.html&view=preview