在Angular 2+中，我可以检测到何时将指令（如routerLink）应用于我的自定义组件吗？

Question

我有一个自定义按钮组件，如下所示（简化）：

@Component({
    selector: 'my-button',
    template: `
        <button (click)="handleClick($event)">
            <ng-content></ng-content>
        </button>
    `
})
export class MyButtonComponent {
    @Output() public onClick: EventEmitter<Event> = new EventEmitter();

    handleClick(e) {
        this.onClick.emit(e);
    }
}

该按钮的正常用例是供用户附加onClick处理程序。 但是，有些用户将希望使用button作为链接，例如：

<my-button [routerLink]="'/dashboard'">Go to dashboard</my-button>

在这种情况下，我想做的是将my-button呈现为<a>元素，而不是原义的<button> 。 但是，为此，我需要检测到该用户已附加了[routerLink]指令。

有什么办法吗？

我知道我可以只添加一个布尔@Input()道具，该道具将渲染切换为<a>模式，但是感觉很笨拙。

Answer 1

您将必须使用@Optional和@Host都位于@angular/core 。

在打字稿的my-button组件上，您将需要进行依赖注入，如下所示：

export class MyButtonComponent implements OnInit {
  constructor(@Optional() @Host() routerLink: RouterLink) {
     console.log(routerLink)
  }
  ...
}

然后在模板上，您可以检查routerLink是否为null并呈现<a>标记或<button>标记

编辑：

要使链接正常工作，您需要执行以下操作：

<a [routerLink]="routerLink.commands">
   Test
</a> 

遗憾的是我没能获得<ng-content>在工作的a出于某种原因标签。

编辑2： ng-content无法正常工作的原因是由于组件中存在多个ng-content ，解决此问题的一种方法是使用ng-template，例如：

<ng-container *ngIf="hasRouterLink">
  <a [routerLink]="routerLink.commands">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
  </a> 
</ng-container>


<ng-container *ngIf="!hasRouterLink">
  <button>
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container> 
  </button> 
</ng-container>

<ng-template #contentTpl><ng-content></ng-content></ng-template>

Answer 2

您是否打算在文本ng-content添加不仅仅是文本ng-content否则onClick会有一些复杂的逻辑？ 我认为您的情况很普遍，通常可以通过创建CSS类以使按钮和链接看起来相同来解决。 您可以根据情况使用<a>或<button>并添加必要的类