javascript - Problem med routing - Hash-tag - Angular 2

Jag försöker konvertera en vanlig Bootstrap-mall till en Angular-webbplats. Jag stöter på problem med routing när jag navigerar från en sida till en annan, till exempel från Om till Kontakt och vice versa.

Mallen har redan nedanstående format som använder viss CSS för smidig rullning med hjälp av hashtag #.

min app.compo.html

Innan: <li><a href="#header">Om</a></li>

efter : <li><a routerLink="/about" routerLinkActive="active" href="#header">Om</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
});

Efter att jag kör npm start visas det som nedan i min konsol

** 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.

Detta är mitt första försök med Angular 2. Jag kan inte förstå de officiella dokumenten och andra relaterade trådar för mitt problem.

vänligen vägled mig till rätt väg. Om möjligt, vänligen dela något plunker- eller stackblitz-exempel

Svar #1

Detta skulle kunna göras utan att använda href hash (#)-funktionalitet..

Här är ett fungerande exempel..

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

Ett annat sätt att göra det är genom att använda hash #

Här är ett annat fungerande exempel..

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

Svar #2

Kan du försöka ta bort href="#header" eftersom det bara behöver routerLink-egenskapen. Och du behöver lägga till router-outLet där du vill ladda den komponenten.

Relaterade artiklar