Javascript 在角度2+；，我是否可以检测指令（如routerLink）何时应用于我的自定义组件？

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

在这种情况下，我想做的是将

我的按钮

呈现为

元素，而不是文本

。但为了做到这一点，我需要检测用户是否已将

[routerLink]

指令附加到它

有办法吗

---

我知道我可以添加一个布尔

@Input（）

道具，将渲染切换到

模式，但感觉很笨重。

您必须使用

@可选
和
@Host
都位于
@angular/core
中

在typescript的
my按钮
组件上，您需要执行依赖项注入，如下所示：

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

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

编辑：

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

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

您是否计划在
ng内容时添加比文本更大的内容
，或者
onClick
会有一些复杂的逻辑？
我认为你的情况很常见，通常通过创建css类使按钮和链接看起来相同来解决。您可以根据情况使用
或
，只需添加必要的类
您必须使用
@Input（）
任何一种方式，对于
路由器链接
。您是什么意思，@12秒？我现在不使用它，链接也起作用。对不起，这是我的错，我没有导入RouteModule。我将补充如何实现这一点的答案。这是有效的。不幸的是，我不能用它来实现我想要的（即创建一个类似于链接的链接），但它确实在组件内部为我提供了路由器链接实例。@panta82，请检查我的编辑，了解如何创建链接。为此创建了stackblitz:@panta82，另一个更新，供参考，关于如何修复多个
ng内容
问题。是的，我也成功了。做得好。有几个问题。1） Typescript抱怨
命令
是私有财产。2） 现在有两个链接，一个用于顶部组件，一个用于内部组件。3） 如果您添加任何额外的routerLink参数（如replaceUrl），它们就不会被应用我正在做的
，我已经定义了一个包含
ng内容的模板，它似乎也在工作。实际上，ng内容周围有更多的东西，比如微调器和图标。
export class MyButtonComponent implements OnInit {
  constructor(@Optional() @Host() routerLink: RouterLink) {
     console.log(routerLink)
  }
  ...
}

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

<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>