单击时获取链接的组件名称

Question

在我正在构建的Web应用程序中，当单击任何链接并更改路由时，我需要知道所单击链接属于哪个组件。

比如，如果标题组件中的任何链接被点击“关于我们”，例如 我需要控制日志'header-component'，例如， 但如果我从页脚组件中点击“关于我们”，我将获得“页脚组件”等等......

应该为所有可以改变路线的<a>元素添加此功能。

Answer 1

您可以创建属性directive。例如，称为linkTracker并将其添加到您的a标签，如下所示。然后在指令附加到click，读取值并记录它

<a linkTracker="about us">

<a linkTracker="footer">

链接tracker.directive.ts

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

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

您可以找到如何创建指令here的指南

Answer 2

您可以使用指令解决您的问题：

    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 3

如果您已经知道父组件，我可以建议另一种解决方案。您可以为要在指令中拦截的每个父级使用父级注入。所以“链接指令”将是这样的（你必须实现你需要的）：

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>