Question

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

就像是否在标题组件中单击任何链接“例如关于我们”
我需要控制台日志“ header-component”，例如，
但是如果我从页脚组件中单击“关于我们”，则会得到“页脚组件”，依此类推。

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

Answer 1

您可以创建属性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);
    }
 }

您可以找到有关如何创建指令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();
      }
  }

在这种情况下，我想查看在Navbar或Footer内是否有'a'标记，中间的其他组件将被忽略。如果要拦截的两个组件在另一个组件中，则可能会有问题，因为这两个组件都将注入指令中，所以我不知道这是否是解决问题的最佳方法，但是在这种情况下，您避免在每个链接中写下指令名称。

我做了一点stackblitz，向您展示了它的工作原理。

通过这种方式，如果您确定每个链接都是注入到指令中的组件的直接子代，则可以在@Host()之前添加@Optional()装饰器，您将获得此行为，并且ll解决每个链接多次注入的问题：

已注入NavbarComponent：

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

未注入NavbarComponent：

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

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

3 个答案: