Angular中的
指令是 js 类,声明为 @directive .我们在Angular中有3个指令.这些指令列在下面和下面;
这些指令构成了主类,详细说明了如何处理,实例化和使用组件.运行时.
结构指令主要处理操作dom元素.结构指令在指令之前有*符号.例如, * ngIf 和 * ngFor .
属性指令交易改变dom元素的外观和行为.您可以创建自己的指令,如下所示.
在本节中,我们将讨论自定义指令用于组件.自定义指令由我们创建,不是标准的.
让我们看看如何创建自定义指令.我们将使用命令行创建指令.使用命令行创建指令的命令是 :
ng g directive nameofthedirective e.g ng g directive changeText
这是它在命令行中的显示方式
C:\projectA4\Angular 4-app>ng g directive changeText installing directive create src\app\change-text.directive.spec.ts create src\app\change-text.directive.ts update src\app\app.module.ts
上面的文件,即 change-text.directive.spec.ts 和 change-text.directive.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: '[changeText]' }) export class ChangeTextDirective { constructor() { } }
上面的文件有一个指令,它还有一个选择器属性.无论我们在选择器中定义什么,都必须在视图中匹配,我们在其中分配自定义指令.
在 app.component.html 视图中,让我们添加指令如下 :
<div style="text-align:center"> <span changeText >Welcome to {{title}}.</span> </div>
我们将在 change-text.directive.ts 文件中写下更改,如下所示 :
import { Directive, ElementRef} from '@angular/core'; @Directive({ selector: '[changeText]' }) export class ChangeTextDirective { constructor(Element: ElementRef) { console.log(Element); Element.nativeElement.innerText="Text is changed by changeText Directive. "; } }
在上面的文件中,有一个名为 ChangeTextDirective 的类和一个构造函数,它采用 ElementRef 类型的元素,这是必需的.该元素包含应用更改文本指令的所有详细信息.
我们添加了 console.log 元素.可以在浏览器控制台中看到相同的输出.元素的文本也如上所示进行了更改.
现在,浏览器将显示以下内容.