Angular 将指令传递给子元素

Question

我正在为我的 Angular 应用构建一个导航栏，我决定制作一个 nav-item 组件来包含导航栏内的链接。我希望能够将 routerLink 指令传递给它，并将该指令传递给 nav-item 组件中的 a 元素。

我的 nav-item 组件看起来像这样。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'nav-item',
  template: `
<li><a>
  <ng-content #wrapper></ng-content>
</a></li>
`
})
export class NavItemComponent implements OnInit {
  @ViewChild('wrapper') content: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }
}

我希望能够像这样使用 nav-item 组件。

<nav-item routerLink="/login">Login</nav-item>

是否有任何方法可以将 routerLink 指令从 nav-item 组件传递到其 a 元素？提前致谢。

Answer 1

可能我误解了你的问题。但是你可以这样做

@Component({
  selector: 'nav-item',
  template: `
<li><a>
  <ng-content #wrapper></ng-content>
</a></li>
`
})
export class NavItemComponent implements OnInit {
  @ViewChild('wrapper') content: ElementRef;
  @Input('link') link: string;



  constructor() { }

  ngOnInit(): void {
      //Inject router on constructor
      this.rourter.navigate(link)
  }
}

然后你打电话给

<nav-item link="/login">Login</nav-item>

Answer 2

这应该也可以，它应该支持传递字符串 link 或 URL 树。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'nav-item',
  template: `
<li><a [routerLink]="routerLink">
  <ng-content></ng-content>
</a></li>
`
})
export class NavItemComponent implements OnInit {
  @Input() routerLink: string | any[];

  constructor() { }

  ngOnInit(): void {
  }
}

附带说明一下，除非您绝对需要 ElementRef，否则出于安全原因不应使用它。请在此处阅读相关说明：https://angular.io/api/core/ElementRef

Angular 将指令传递给子元素

Angular passing directive to child element

angular

typescript

angular-directive

angular-routerlink