首页 文章

在带有bootstrap和angular的导航栏中，RouterLink不可单击

提问于
浏览 次
0

我有一个导航栏 .

在这个导航栏中我想向下滚动，当href设置为＃但是当它设置为routerLink时，我想转到这个页面：

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">hFinder</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#cards">Cards</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#impressum">Impressum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/']">Start</a>
            </li>
        </ul>
    </div>
</div>

链接在顶部，但我无法点击它 . 卡和impressum向下滚动 .

enter image description here

这是app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SedcardComponent } from './sedcard/sedcard.component';
import { StartComponent } from './start/start.component';

const routes: Routes = [
    { path: '', component: StartComponent },
    { path: 'sedcard/:id', component: SedcardComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true} )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是控制台：

路由器事件：NavigationStart NavigationStart（id：1，url：'/'）NavigationStart {id：1，url：“/”，navigationTrigger：“imperative”，restoredState：null}

路由器事件：RoutesRecognized RoutesRecognized（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）} ）RoutesRecognized {id：1，url：“/”，urlAfterRedirects：“/”，state：RouterStateSnapshot}

路由器事件：GuardsCheckStart GuardsCheckStart（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）} ）GuardsCheckStart {id：1，url：“/”，urlAfterRedirects：“/”，state：RouterStateSnapshot}

路由器事件：ChildActivationStart ChildActivationStart（路径：''）ChildActivationStart {snapshot：ActivatedRouteSnapshot}

路由器事件：ActivationStart ActivationStart（路径：''）ActivationStart {snapshot：ActivatedRouteSnapshot}

路由器事件：GuardsCheckEnd GuardsCheckEnd（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）} ，shouldActivate：true）GuardsCheckEnd {id：1，url：“/”，urlAfterRedirects：“/”，state：RouterStateSnapshot，shouldActivate：true}

路由器事件：ResolveStart ResolveStart（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）} ）ResolveStart {id：1，url：“/”，urlAfterRedirects：“/”，state：RouterStateSnapshot}

路由器事件：ResolveEnd ResolveEnd（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）} ）ResolveEnd {id：1，url：“/”，urlAfterRedirects：“/”，state：RouterStateSnapshot}

路由器事件：ActivationEnd ActivationEnd（路径：''）ActivationEnd {snapshot：ActivatedRouteSnapshot}路由器事件：ChildActivationEnd ChildActivationEnd（路径：''）ChildActivationEnd {snapshot：ActivatedRouteSnapshot}路由器事件：NavigationEnd NavigationEnd（id：1，url：'/'， urlAfterRedirects：'/'）NavigationEnd {id：1，url：“/”，urlAfterRedirects：“/”}

路由器事件：滚动滚动（锚点：'null'，位置：'null'）滚动{routerEvent：NavigationEnd，position：null，anchor：null}

angular typescript angular6 angular-routing

1 回答

  • 1

    你想要有角度的碎片 .

    当您使用 href="#youcontent" 时，它会将您的页面重定向到特定网址 . 不要在你的角度使用它 .

    使用这样：

    <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link js-scroll-trigger" (click)="moveToCard()">Cards</a>
        </li>
    </ul>
</div>

    在你的html中添加模板引用变量 .

    <div #Test>
   <div>
       <p>You content </p>
   </div>
</div>

    像这样在你的.ts文件中调用它 .

    @ViewChild('test') public test : ElementRef;

public moveToCard():void {
    this.test.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
}

    Or Use This Method :

    .TS

    changeFragment(value) {
    document.querySelector('#' + value).scrollIntoView({ behavior : 'smooth' });
};

    html的

    <p id="divA">
  <strong> This is the Div A </strong>.<br>
    <button (click)="changeFragment('divB')">Jump to Div B</button>
</p>

<p id="divB">
    <strong> This is the Div B </strong>.<br>
    <button (click)="changeFragment('divA')">Back to DivA</button>.
</p>
    回复于

相关问题