Question

我有一个导航栏。

在这个导航栏中，我想向下滚动，当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>

链接位于顶部，但我无法单击它。卡和印记向下滚动。

这是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：“命令式”，storedState：null}

路由器事件：公认的路由 RoutesRecognized（id：1，url：'/'，urlAfterRedirects：'/'，state：Route（url：''，path：''）{Route（url：''，path：''）}））已识别的路由{id：1，url：“ /”，urlAfterRedirects：“ /”，状态：RouterStateSnapshot}

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

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

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

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

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

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

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

路由器事件：滚动滚动（锚定：“ null”，位置：“ null”）滚动{routerEvent：NavigationEnd，位置：null，锚点：null}

Answer 1

您想要碎片化的角度。

使用href="#youcontent"时，它将页面重定向到特定的URL。请勿随意使用它。

像这样使用：

<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' });
}

或使用此方法：

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

在具有引导程序和角度的导航栏中，无法单击RouterLink

1 个答案: