Angular7:指令
Angular中的指令是一个js类,它被声明为@directive。Angular有3种指令。指令如下所示。
组件指令
这些构成了主类,它详细说明了在运行时应该如何处理、实例化和使用组件。
结构指令
结构指令主要处理dom元素的操作。结构指令前面有*符号。例如,*ngIf和*ngFor。
属性指令
属性指令处理改变dom元素的外观和行为。您可以创建自己的指令,如下节所述。
如何创建自定义指令?
在本节中,我们将讨论组件中使用的自定义指令。自定义指令由我们自己创建的,不是标准的。
让我们看看如何创建自定义指令。我们使用命令行创建该指令。使用命令行创建指令的命令如下
ng g directive nameofthedirective e.g ng g directive changeText
它出现在命令行中,如下代码所示:
C:\projectA7\angular7-app>ng g directive changeText CREATE src/app/change-text.directive.spec.ts (241 bytes) CREATE src/app/change-text.directive.ts (149 bytes) UPDATE src/app/app.module.ts (565 bytes)
命令将创建上述文件,即change-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 { AppRoutingModule } from './app-routing.module'; 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, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ChangeTextDirective类包含在上述文件的声明中。该类也从下面给出的文件中导入: change-text.directive import { Directive } from '@angular/core'; @Directive({ selector: '[changeText]' }) export class ChangeTextDirective { constructor() { } }
上面的文件有一个指令,也有一个选择器属性。无论我们在选择器中定义什么,在视图中都必须匹配,在视图中我们分配自定义指令。
在app.component.html添加如下指令
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1> Welcome to {{title}}. </h1> </div> <div style = "text-align:center"> <span changeText >Welcome to {{title}}.</span> </div>
我们在change-text.directive.ts文件中编写如下更改
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类型的元素。该元素包含应用“Change Text”指令的所有详细信息。
我们添加了console.log元素。程序的输出可以在浏览器控制台中看到,元素的文本也会如上所示进行更改。
现在,浏览器将显示以下内容
控制台中指定指令选择器的元素的详细信息。因为我们已经将changeText指令添加到span标记中,所以显示了span元素的详细信息。