Question

我正在研究Angular文档，并且看到某些指令具有某些属性和方法。

例如，routerLinkActive具有一个名为isActive: boolean的属性和一个方法ngOnChanges(changes: SimpleChanges): void。

我可以使用isActive属性和ngOnChanges方法吗？如果答案是肯定的，您可以举一个如何使用isActive和ngOnChanges的例子吗？

Answer 1

在我发表评论之后，我将向您解释文档。

routerLinkActive的文档从页面顶部的小芯片开始：

此芯片表示routerLinkActive是指令。深入阅读文档后，您将发现有两种类型的指令：attribute和structural。读完两者后，您将了解routerLinkActive是属性指令。

这意味着您必须通过其选择器在HTML元素上使用此伪指令。

这是一个CSS选择器，它告诉您如何使用指令。

通过写作

<div routerLinkActive="XXX"></div>

您将在该元素上创建指令的实例（在我之前提供的文档中对此进行了说明）。

内置指令（又称框架直接提供的指令）通常很简单：它们的用法非常简单。

关于这一点，我们可以阅读

允许您在链接的路由变为活动状态时向元素添加CSS类。

在description片段下，您将看到有关如何使用伪指令的示例。

现在，对于方法和变量：在页面的tpo中，您将看到源代码的链接：

这会将您重定向到指令的源代码。

在其中，您将看到所需的内容：什么是变量，它们代表什么，所有已声明的函数以及它们的作用。

您可能知道，也可能不知道，ngOn函数是生命周期挂钩：它们是在函数生命中特定时间点调用的函数。

在这种情况下，您拥有ngOnChanges，每次在@Inputs上触发更改检测时都会调用它。

通常，您不调用这些钩子：它们自己调用函数，但不调用它们。

现在，对于isActive标志：您可以使用它。

要使用它，您将必须阅读指令的修饰符：

@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive',
})

有趣的是第二个属性exportAs。

如explanation of a directive中所述，此属性执行以下操作：

可在模板中用于将此指令分配给变量的一个或多个名称。对于多个名称，请使用逗号分隔的字符串。

无需深入了解（在所有文档中都可以找到它的示例），它允许您通过模板将指令实例与变量关联。

它的表示法是

<div #myTemplateVariable="exportAsValue"></div>

对于routerLinkActive指令，它会给出

<div #RLO="routerLinkActive"></div>

但是，exportAs不会创建指令。指令是通过选择器创建的，还记得吗？在这里，我们的选择器是[routerLinkActive]：表示

每个具有routerLinkActive属性的HTML元素。

所以您需要添加该选择器：

<div routerLinkActive #RLO="routerLinkActive"></div>

现在，在RouterLinkActive变量中，您有了RLO的实例。

这意味着您现在可以做

<div *ngIf="RLO.isActive">This is displayed only if the router link of the element is active</div>

从现在开始，只有当元素中的路由器链接处于活动状态时，才会显示div。

我认为我已经解释了最大的一部分...

...我希望这堆文字对您有所帮助，如果您有任何疑问，请随时问我，我会回答您。