Angular 6 - 指令

Angular 6指令 - 从简单和简单的步骤学习Angular 6，从基本到高级概念，包括概述，环境设置，项目设置，组件，模块，数据绑定，事件绑定，模板，指令，管道，路由，服务，Http服务，表格，动画，材料，CLI，示例。

Angular中的

指令是 js 类，声明为 @directive .我们在Angular中有3个指令.这些指令列在下面和下面;

组件指令

这些指令构成了主类，详细说明了如何处理，实例化和使用组件.运行时.

结构指令

结构指令主要处理操作dom元素.结构指令在指令之前有*符号.例如， * ngIf 和 * ngFor .

属性指令

属性指令交易改变dom元素的外观和行为.您可以创建自己的指令，如下所示.

如何创建自定义指令？

在本节中，我们将讨论自定义指令用于组件.自定义指令由我们创建，不是标准的.

让我们看看如何创建自定义指令.我们将使用命令行创建指令.使用命令行创建指令的命令是 :

ng g directive nameofthedirectivee.gng g directive changeText

这是它在命令行中的显示方式

C:\projectA6\Angular6App>ng g directive changeTextCREATE src/app/change-text.directive.spec.ts (241 bytes)CREATE src/app/change-text.directive.ts (149 bytes)UPDATE src/app/app.module.ts (486 bytes)

以上文件，即更改创建-text.directive.spec.ts 和 change-text.directive.ts 并更新 app.module.ts 文件.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NewCmpComponent } from './new-cmp/new-cmp.component';import { ChangeTextDirective } from './change-text.directive';@NgModule({   declarations: [      AppComponent,      NewCmpComponent,      ChangeTextDirective   ],   imports: [      BrowserModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

ChangeTextDirective 类包含在上述文件的声明中.该类也从以下文件中导入.

更改文本.指令

import { Directive } from '@angular/core';@Directive({   selector: '[appChangeText]'})export class ChangeTextDirective {   constructor() { }}

上述文件有一个指令，它还有一个选择器属性.无论我们在选择器中定义什么，都必须在视图中匹配，我们在其中分配自定义指令.

在 app.component.html 视图中，让我们添加指令如下 :

   Welcome to {{title}}.

我们将在 change-text.directive.ts 文件中写下更改，如下所示 :

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';@Directive({   selector: '[appChangeText]'})export class ChangeTextDirective {   constructor(Element: ElementRef) {      console.log(Element);      Element.nativeElement.innerText = "Text is changed by changeText Directive. ";   }}

在上面的文件中，有一个名为 ChangeTextDirective 的类和一个构造函数，它采用 ElementRef 类型的元素，这是必需的.该元素包含应用更改文本指令的所有详细信息.

我们添加了 console.log 元素.可以在浏览器控制台中看到相同的输出.元素的文本也如上所示进行了更改.

现在，浏览器将显示以下内容.

ChangeText Directive