Angular ссылочный идентификатор в рекомендациях ngClass - PullRequest
Новая
       10

Angular ссылочный идентификатор в рекомендациях ngClass

0 голосов
/ 07 февраля 2020

Я сделал этот код, чтобы изменить css опций навигационной панели при изменении активной страницы.

html: 

   <ul>
        <li routerLink="/" id="homePage" (click)="selected($event)"
            [ngClass]="{'default': activePage=='homePage', 'active': activePage!=='homePage' }">Home
        </li>

        <li id="placeholder" routerLink="/placeholder" (click)="selected($event)"
            [ngClass]="{'default': activePage=='placeholder', 'active':  activePage!=='placeholder' }">PlaceHolder
        </li>
    </ul>

TS: 

  public selected($event) {
    var target = event.target || event.srcElement || event.currentTarget;
    this.activePage = target["id"];
  }

но у меня есть две проблемы, которые я не могу понять:

  1. Я хотел бы написать [ngClass] для проверки атрибута id, а не только идентификатор в виде жестко закодированной строки

  2. Если я изменю адрес вручную, этот код не будет выполнен и домашняя страница будет отображаться как активная страница, поскольку она используется по умолчанию - как это исправить?

1 Ответ

0 голосов
/ 07 февраля 2020

Router поможет вам достичь ожидаемого поведения. 

<ul>
  <li [routerLink]="routes.home"
      [ngClass]="{ 'activated': currentTab === routes.home}">
    Home
  </li>
  <li [routerLink]="routes.placeholder"
      [ngClass]="{ 'activated': currentTab === routes.placeholder}">
    PlaceHolder
  </li>
</ul>
<router-outlet></router-outlet>

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  currentTab = '';

  readonly routes = {
    home: '/home',
    placeholder: '/placeholder'
  };

  constructor(private router: Router) {
    this.router.events
      .pipe(
        filter(e => e instanceof NavigationEnd),
        map((e: NavigationEnd) => e.url)
      )
      .subscribe(newUrl => {
        this.currentTab = newUrl;
    });
  }
}

Вы можете проверить, как это работает здесь

...