javascript - 在 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处理程序。但是，有些用户希望使用按钮作为链接，如下所示:

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

在这种情况下我想做的是渲染 my-button作为<a>元素而不是文字 <button> 。但为了做到这一点，我需要检测用户已附加 [routerLink]向它发出指令。

有什么办法可以做到这一点吗？

我知道我可以添加一个 bool 值 @Input()会将渲染切换到 <a> 的 prop模式，但感觉很笨拙。

Answer 1

您必须使用@Optional和@Host两者均位于 @angular/core .

在您的my-button上对于 typescript 组件，您需要像这样进行依赖注入(inject):

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>