Получить название компонента ссылок при нажатии

Question

В веб-приложении, которое я создаю, при нажатии любой ссылки и изменении маршрута мне нужно знать, к какому компоненту относится данная ссылка.

как если бы какая-либо ссылка в компоненте заголовка была нажата «о нас», например,
Мне нужно консоль журнала «заголовок-компонент», например,
, но если я нажала «о нас» изкомпонент нижнего колонтитула, я получу 'компонент нижнего колонтитула' и так ...

Эта функциональность должна быть добавлена ​​для всех элементов <a>, которые могут изменить маршрут.

Answer 1

Вы можете решить вашу проблему с помощью директивы:

    import { Directive, HostListener, Input } from '@angular/core';

    @Directive({
       selector: '[myParent]'
    })
    export class MyParentDirective {
        @Input('myParent') parent: string;
        @HostListener('click') onMouseClick() {
            this.showParent();
        }
        constructor() { }

        showParent(){
            console.log(this.parent)
        }
    }

и тогда вы можете использовать его вот так

<a myParent="footer">About Us</a>

Answer 2

Я мог бы предложить другое решение, если вы уже знаете родительские компоненты.Вы можете использовать инъекцию родителей для каждого родителя, которого вы хотите перехватить внутри директивы.Таким образом, «директива ссылки» будет выглядеть следующим образом (вы должны реализовать то, что вам нужно):

import { Directive, HostListener, Input, Host, Inject, forwardRef,Optional } from '@angular/core';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';

  @Directive({
      selector: 'a'
  })
  export class LinkDirective {
      @HostListener('click') onMouseClick() {
          this.showParent();
      }

      parent: FooterComponent | NavbarComponent;

      constructor(@Optional() @Inject(forwardRef(() => FooterComponent)) private footer?: FooterComponent,
      @Optional() @Inject(forwardRef(() => NavbarComponent)) navbar?: NavbarComponent) { 
        console.log(footer, navbar)
        if(footer){
          this.parent = footer;
        }
        if(navbar){
          this.parent = navbar
        }
        if(!this.parent){
          this.parent = null;
        }
      }

      showParent(){
          console.log(this.parent, (this.parent) ? this.getTagName(this.parent.constructor.name) : null);
      }

      getTagName(el: string){
        return 'my-' + el.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
      }
  }

В этом случае я хочу посмотреть, находится ли тег 'a' внутри Navbar илиFooter, остальные компоненты в середине будут игнорироваться.У вас может быть проблема, если два компонента, которые вы хотите перехватить, находятся внутри другого, потому что оба будут внедрены внутри директивы, поэтому я не знаю, является ли это лучшим решением вашей проблемы, но в этом случае вы избегаетенапишите в каждой ссылке имя директивы.

Я сделал небольшой stackblitz , чтобы показать вам, как это работает.

Кстати, если вы уверены, чтокаждая ссылка является прямым потомком компонента, внедренного в вашу директиву. Вы можете добавить декоратор @Host() до того, как @Optional() вы получите такое поведение, и вы решите проблему с более чем одним внедрением для каждой ссылки:

NavbarComponent введен:

<my-navbar>
    <a>Test</a>
</my-navbar>

NavbarComponent не введен:

<my-navbar>
    <my-middle-component>
        <a>Test</a>
    </my-middle-component>
</my-navbar>

Answer 3

Вы можете создать атрибут directive.например, под названием linkTracker и добавьте его в теги a, как показано ниже.затем в директиве присоединения к щелчку прочитайте значение и запишите его

<a linkTracker="about us">

<a linkTracker="footer">

link-tracker.directive.ts

@Directive({
    selector: '[linkTracker]',
    exportAs: 'linkTracker'
})
export class LinkTrackerDirective
{
    @Input() linkTracker: string;

    @HostListener('click', ['$event.target'])
    onClick()
    {
       console.log(this.linkTracker);
    }
 }

Вы можете найти руководство по созданию директивы здесь