使用和创建角指令的实用指南 - 站点点

>本文侧重于角度指令 - 它们是什么，如何使用它们并构建我们自己的。

>指令可能是角度应用中最重要的一点，如果考虑到它，最使用的角度单位，组件实际上是指令。

>一个角部分不仅仅是带有模板的指令。当我们说组件是角度应用的构件时，我们实际上是在说指令是角度应用的构件。

钥匙要点

Angular指令可以是预先定义的，例如NG重复或定制。创建自定义指令涉及从 @angular/core导入指令，定义指令类，并将其添加到NGMODULE中的声明中。

>重要的是为手头的任务选择正确的指令类型。如果在不可见DOM时仍将有用，则应使用属性指令。如果元素无用，则应使用结构指令将其删除。但是，应注意避免使DOM过于复杂或负面影响。

• >基本概述
在核心处，指令是一个函数，每当角编译器在DOM中找到它时都会执行。 Angular指令用于通过给出新的语法来扩展HTML的功率。每个指令都有一个名称 - 一个来自角度定义的ng重复，或一个可以称为任何东西的自定义的指令。每个指令确定可以使用的位置：在元素，属性，类或评论中。 默认情况下，从角版本2及以后，Angular指令分为三种不同类型：
• 组件
正如我们之前看到的，组件只是带有模板的指令。在引擎盖下，他们使用指令API，并给我们一种更清洁的方式来定义它们。
• 其他两种指令类型没有模板。相反，它们是专门针对DOM操纵的。
>
• 属性指令

属性指令通过改变其行为和外观来操纵DOM。

我们使用属性指令将条件样式应用于元素，显示或隐藏元素或根据不断变化的属性动态更改组件的行为。

结构指令

这些是专门针对创建和破坏DOM元素的专门量身定制的。

某些属性指令（例如隐藏的指令）显示或隐藏元素 - 基本上可以保持DOM。但是，结构性角指令不太友好，因为它们添加或完全删除了DOM的元素。因此，当使用这些时，我们必须格外小心，因为我们实际上正在更改HTML结构。

使用现有的Angular指令

>

使用Angular中的现有指令非常容易，如果您过去写了一个Angular应用程序，我敢肯定您已经使用过它们。 NGCLASS指令是现有角度属性指令的一个很好的例子：

>因此，通过在下面的示例上使用NGCLASS指令，我们实际上将蓝色类添加到我们的段落中，并且明确不添加黄色。由于我们正在改变类的外观，而不是更改实际的HTML结构，因此这显然是属性指令。但是Angular还提供了开箱即用的结构指令，例如NGIF：>

在此示例中，我们使用NGIF指令使用按钮添加或删除文本。在这种情况下，HTML结构本身会受到影响，因此显然是一个结构性指令。

有关可用角指令的完整列表，我们可以检查官方文档。 正如我们所看到的，使用角指令非常简单。角指令的真正力量具有创建我们自己的能力。 Angular提供了一个干净而简单的API来创建自定义指令，这就是我们在以下各节中所关注的。

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

创建属性指令

创建指令类似于创建组件。但是在这种情况下，我们使用@Directive Decorator。就我们的示例而言，我们将创建一个称为“ my-reror指导性”的指令，该指令将以红色的元素背景突出显示，以指示错误。

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

>

>在我们的示例中，我们将使用Angular 2 QuickStart软件包。我们只需要克隆存储库，然后运行NPM安装和NPM启动。它将为我们提供一个可以用来实验的样板应用程序。我们将在该样板的顶部构建示例。

>让我们从SRC/App文件夹上创建一个名为app.myerrordiratection.ts的文件开始，然后将以下代码添加到它：>

>从 @angular/core导入指令后，我们可以使用它。首先，我们需要一个选择器，该选择器为指令命名。在这种情况下，我们称其为my-error。

>

最佳实践表明，在命名角指令时，我们始终使用前缀。这样，我们一定要避免与任何标准HTML属性发生冲突。我们也不应该使用NG前缀。 Angular使用的是，我们不想将我们自定义的Angular指令与Angular预定义的指令混淆。在此示例中，我们的前缀是我的 - 。 然后，我们创建了一个类，肌倾向。要访问DOM的任何元素，我们需要使用ElementRef。由于它也属于 @angular/core软件包，因此与指令一起导入并使用它是一个简单的问题。

> 然后，我们添加了代码以实际突出我们类的构造函数。>

为了能够使用此新创建的指令，我们需要将其添加到app.module.ts文件上的声明中：

>

最后，我们想利用刚创建的指令。为此，让我们浏览到app.component.ts文件并添加以下内容：

最终结果看起来与以下方式相似：

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

创建结构性指令

在上一节中，我们看到了如何使用Angular创建属性指令。创建结构行为的方法是完全相同的。我们创建一个带有指令代码的新文件，然后将其添加到声明中，最后，我们将其在组件中使用。

对于我们的结构指令，我们将实施NGIF指令的副本。这样，我们不仅将实施指令，而且还要查看角指令如何处理幕后的事情。

>让我们从我们的app.mycustomifdiractive.ts文件开始 如我们所见，我们正在为此使用几个不同的导入，主要是：输入，Templateref和ViewContainerRef。输入装饰器用于将数据传递给组件。 Templateref一个用于实例化嵌入式视图。嵌入式视图代表要渲染的布局的一部分，并链接到模板。最后，ViewContainerRef是一个可以连接一个或多个视图的容器。这些组件一起工作如下：

通过注入ViewContainerRef，指令访问视图容器。通过调用ViewContainerRef的CreateMbedDedView方法并传递模板，创建并将嵌入式视图连接到视图容器。我们想使用该指令附加到的模板，因此我们通过注入的Templateref传递。

- 来自rangle.io的Angular 2训练

接下来，我们将其添加到我们的声明器中：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

我们在组件中使用它：

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

结构指令提供的方法类型可能非常有用，例如，当我们必须根据其权限为不同用户展示不同信息时。例如，站点管理员应该能够查看和编辑所有内容，而常规用户则不得。如果我们使用属性指令将私人信息加载到DOM中，则常规用户和所有此事的用户都可以访问它。

>

>角指令：属性与结构

我们研究了属性和结构指令。但是我们什么时候应该使用一个或另一个？

答案可能会令人困惑，我们最终可能会因为解决问题而最终使用错误的答案。但是有一个简单的规则可以帮助我们选择合适的规则。基本上，如果具有指令的元素在不可见的DOM时仍将在DOM中有用，那么我们绝对应该保留它。在这种情况下，我们使用隐藏的属性指令。但是，如果该元素没有用，那么我们应该将其删除。但是，我们必须小心避免一些常见的陷阱。我们必须避免始终隐藏元素的陷阱，因为它更容易。这将使DOM更加复杂，并可能对整体性能产生影响。还应避免总是删除和重新创建元素的陷阱。绝对是更干净的，但以牺牲性能为代价。

> 总共，应仔细分析每种情况，因为理想的解决方案始终是对您的应用结构，行为和性能的总体影响最小的解决方案。该解决方案可能是属性指令，结构指令，或者在最常见的情况下，这两个方案之间都会妥协。

结论

在本文中，我们查看了角指令，这是角度应用的核心。我们查看了不同类型的指令，并看到了如何创建适合我们需求的自定义指令。

我希望本文能够通过Angular指令来启动并运行。如果您有任何疑问，请随时使用下面的评论部分。

经常询问有关角指令的问题（常见问题解答）

角指令的不同类型是什么？顾名思义，组件指令是带有模板的指令。它们本质上是角成分。属性指令用于改变DOM元素的行为，外观和感觉。另一方面，结构指令用于通过添加，删除或替换DOM中的元素来操纵DOM布局。

>如何在Angular中创建自定义指令？首先，您需要从Angular Core导入指令装饰器。然后，您需要定义指令类并用@Directive Decorator进行装饰。装饰器中的选择属性应匹配您要用于指令的名称。最后，您需要将您的指令添加到NGMODULE中的声明数组。

如何在Angular中使用内置指令？>

>我如何将数据绑定到Angular中的指令？在几种方面。一种常见的方法是通过属性绑定，在其中您将DOM元素的属性绑定到组件的属性。您还可以使用事件绑定来响应用户操作，或双向绑定以保持模型并保持同步。在Angular中涉及创建使用指令然后测试该组件的测试组件。您可以使用TestBed实用程序来创建动态测试组件，然后使用componentFixture与组件及其指令进行交互。

>我可以在Angular中使用多个指令吗？ >是的，您可以在Angular中的单个元素上使用多个指令。但是，您应该意识到，应用指令的顺序会影响最终结果。 Angular按照模板中列出的顺序应用指令，因此您应按照希望应用它们的顺序列出您的指令。

>

如何将参数传递给Angular的指令？ 🎜>您可以使用@Input Decorator将参数传递到Angular的指令。这使您可以将指令的属性绑定到组件中的值。然后，您可以在您的指令中使用此值来控制其行为。

>如何在Angular中创建一个共享指令？

在Angular中创建共享指令，您需要定义您的指令在共享模块中。然后，您可以将此共享模块导入要使用该指令的任何其他模块。这使您可以在多个组件或模块上重复使用相同的指令。

>

如何使用Chrome和Firefox的Angular DevTools扩展来完成角度的指令？此工具使您可以检查应用程序的组件，指令和服务，并查看其当前状态和依赖项。您也可以使用控制台与您的应用程序和调试问题进行交互。

>

以上是使用和创建角指令的实用指南 - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！