类别:体系结构

Angular选择器的强大功能

betway必威滚球

昨天，我们看到了使用指令而不是组件可以提高代码的可重用性不要将我们的代码逻辑绑定到特定的HTML模板。

现在，如果我们想一劳永逸地编写一些代码，并使其适用于应用程序中所有符合某些特定条件的HTML元素，我们还有另一个未充分使用的工具:CSS选择器。

例如，假设我们想要isActive指令从之前的例子应用于应用程序中的所有按钮。当然，我们可以手动查找所有按钮并添加isActive但这将是乏味且容易出错的。

或者我们可以更有想象力，改变该指令的选择器，使其应用于所有按钮和任何其他具有isActive属性:

通过该实现，所有当前(和未来)按钮都将应用该指令。但是如果我们想要做出任何例外并禁用某些按钮上的指令呢?我们可以这样做:

然后我们只需要加上disableIsActive属性设置为那些不需要isActive指令:

我的观点是有一些创造性的用例CSS选择器，这些选择器与用于CSS样式化的选择器相同，这意味着我们可以依赖于类、属性、元素名称或以上任何组合!

Angular框架恰恰在很多地方做到了这一点。如果你曾经想知道Angular是如何神奇地自动处理表单的，现在你知道答案了。的ngForm指令有一个复杂的选择器，将适用于所有形式元素默认情况下:

什么时候创建指令和组件?

betway必威滚球

大多数Angular应用都是由大多数组件和少数指令(如果有的话)组成。今天，我想向你们展示一个例子，在这个例子中，指令比组件更有意义。

考虑以下组件模板:

我们已经创建了一个绑定到单个HTML元素(按钮)的组件，并且该模板中的所有逻辑都是关于更改属性值(用于isActive类和禁用属性)。

为了实现这一点，我们需要三个专门的输入，这导致了可重用性的损失:

上述情况并不理想，因为:

  • 我们的按钮只能显示文本，而不能显示HTML(例如，没有图标)
  • 我们的按钮假设它的状态总是依赖于保存而且hasError，但是如果我们想为其他用例添加第三个变量呢?

让我们创建一个指令:

可以这样使用:

这个实现好多了，因为:

  • 它可以用于任何HTML元素，而不仅仅是按钮(假设元素支持禁用正确)
  • 这个按钮可以显示任何东西，而不仅仅是文本
  • 的标准isActive是否正确取决于用例，而不是仅仅保存而且hasError．

这里的重点是在这种情况下使用指令使我们的代码更灵活，因此更可重用。这是为什么流行的组件库严重依赖指令而不是组件。这里有一个例子Angular Material文档：

你们可以看到mat-button是指令，不是组件。这样，它就可以和按钮或者一个一个标签。你可以找到这篇文章的示例代码在Stackblitz．

下次当您试图在模板中创建带有一两行HTML的组件时，请考虑这一点。最有可能的是，你需要的是一个指令。

看看这个教程的另一个指令的例子这比使用组件更有意义。