Closed GianLaz closed 6 years ago
Try [attr.href] instead of href as it's an attribute binding.
Hi, thanks for the tip but now we have another issue:
ERROR TypeError: Cannot read property 'replace' of undefined at ScrollSpyItemDirective.get [as section] (thisissoon-angular-scrollspy.js:49) at thisissoon-angular-scrollspy.js:182 at Array.find (<anonymous>) at QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.find (core.js:5441) at ScrollSpyService.push../node_modules/@thisissoon/angular-scrollspy/fesm5/thisissoon-angular-scrollspy.js.ScrollSpyService.setSpySectionStatus (thisissoon-angular-scrollspy.js:182) at ScrollSpySectionComponent.push../node_modules/@thisissoon/angular-scrollspy/fesm5/thisissoon-angular-scrollspy.js.ScrollSpySectionComponent.onInViewportChange (thisissoon-angular-scrollspy.js:320) at Object.eval [as handleEvent] (ScrollSpySectionComponent.html:4) at handleEvent (core.js:11107) at callWithDebugContext (core.js:12204) at Object.debugHandleEvent [as handleEvent] (core.js:11907)
This is my code:
<ul class="nav" snScrollSpy id="scrollspyMenu"> <li class="list-inline-item" *ngFor="let link of menu; trackBy:commonsService.ngForTrackBy" > <a *ngIf="!link.scrollTo" class="nav-item nav-link" routerLink="{{link.href}}" routerLinkActive="{{link.activeClass}}">{{link.name}}</a> <a *ngIf="link.scrollTo" class="nav-link" snScrollSpyItem scrollTo [attr.href]="link.scrollTo" for="scrollspyMenu">{{link.name}}</a> </li> </ul>
@GianLaz you'll need to set both [attr.href]
and [href]
. For some reason using the bracket syntax here only sets the property and not the attribute as well.
It doesn't work with href binding. For example:
<ul class="nav" snScrollSpy id="scrollspyMenu"> <li class="nav-item" *ngFor="let link of menu; trackBy:commonsService.ngForTrackBy" ><a snScrollSpyItem for="scrollspyMenu" class="nav-link" href="{{link.scrollTo}}">{{link.name}}</a></li> </ul>
this static version works:
`
If you inspect the DOM you'll can see that the anchor tag hasn't the href attr and it isn't obviously clickable.