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要素の詳細が表示されます。