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.

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

Answer 2

您可以尝试删除href =“＃header”，因为它只需要routerLink属性。并且需要在您要加载该组件的位置添加router-outLet。

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

2 个答案: