RouterLink не будет активным в навигационной панели с начальной загрузкой и угловым - PullRequest
Новая
       6

RouterLink не будет активным в навигационной панели с начальной загрузкой и угловым

0 голосов
/ 22 сентября 2018

У меня есть навигационная панель.

В этой навигационной панели я хочу прокрутить вниз, когда 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>

Ссылка вверху, но я не могу щелкнуть по ней.Карточка и отпечаток прокручиваются вниз.

enter image description here

Вот приложение-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: '/', состояние: Route (url: '', path: '') {Route (url: '', path: '')}) RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", состояние: RouterStateSnapshot}

Событие маршрутизатора: GuardsCheckStart GuardsCheckStart (id: 1, url:' / ', urlAfterRedirects:'/', состояние: Route (url: '', path: '') {Route (url: '', path: '')}) GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: "/", состояние: RouterStateSnapshot}

Событие маршрутизатора: ChildActivationStart ChildActivationStart (путь: '') ChildActivationStart {снимок: ActivatedRouteSnapshot}

Событие маршрутизатора: ActivationStart ActivationНачало (путь: '') ActivationStart {снимок: 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: '',путь: '')}) ResolveStart {id: 1, url: "/", urlAfterRedirects: "/", состояние: RouterStateSnapshot}

Событие маршрутизатора: ResolveEnd ResolveEnd (id: 1, url: '/', urlAfterRedirects: '/', состояние: Route (url: '', path: '') {Route (url: '', path: '')}) ResolveEnd {id: 1, url: "/", urlAfterRedirects:"/", состояние: RouterStateSnapshot}

Событие маршрутизатора: ActivationEnd ActivationEnd (путь: '') ActivationEnd {снимок: ActivatedRouteSnapshot} Событие маршрутизатора: ChildActivationEnd ChildActivationEnd (путь: '') ChildActivationEnd {snapshot: ActivatedRouteSnapshot} Событие маршрутизатора: NavigationEnd NavigationEnd (id: 1, url: '/', urlAfterRedirects: '/') NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

Событие маршрутизатора: Scroll Scroll (якорь: 'ноль', позиция: 'ноль') Scroll {routerEvent: NavigationEnd, позиция: ноль, якорь: ноль}

1 Ответ

0 голосов
/ 22 сентября 2018

Вы хотите фрагментации в угловых.

Когда вы используете 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>
...