javascript - 路由问题 - 哈希标签 - Angular 2

Question

我正在尝试将普通 Bootstrap 模板转换为 Angular 网站。我在从一页导航到另一页时遇到路由问题，例如 About至 Contact反之亦然。

模板已经具有以下格式，在 hashtag # 的帮助下使用一些 css 实现平滑滚动.

我的 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.

这是我第一次尝试使用 Angular 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