RouterLink 在带有引导程序和角度的导航栏中无法点击

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: "imperative", restoreState: 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 {快照：ActivatedRouteSnapshot}

路由器事件：ActivationStart 激活开始（路径：''） ActivationStart {快照：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 {快照：ActivatedRouteSnapshot} 路由器事件：ChildActivationEnd ChildActivationEnd（路径：''） ChildActivationEnd {快照：ActivatedRouteSnapshot} 路由器事件：NavigationEnd NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/') NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

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

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

或使用此方法：

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