【Angular】Directiveによる追加属性の作成

今回はディレクティブというものを説明していきます。
これは何かというと、例えば

<p>林檎</p>

という風にHTMLに書かれていたら、当然ページには単に「林檎」という文字が出るだけですが、

<p style="color: red;">林檎</p>

という風に書けば、赤い「林檎」という文字になりますし、

<p align="center">林檎</p>

という風に書けば、「林檎」が中央に表示されることになります。
こんな風にHTMLファイルを書く際には、タグに属性を指定することで表示を変えることが出来ます。
この属性を作れるのがディレクティブになります。

スポンサーリンク

ディレクティブ新規作成

ディレクティブを新規作成する際は、コマンドプロンプトで以下コマンドを実行します。

ng generate directive ○○○○(好きなディレクティブ名)

私は今回「ringodirective」という名前で作りました。

作成されたディレクティブのコード

では、実際に作られたファイルの中身を見てみましょう。

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

@Directive({
  selector: '[appRingodirective]'
})
export class RingodirectiveDirective {

  constructor() { }

}

@Directiveデコレータがついているクラスが定義されていますね。
そしてデコレータのselectorで指定されている値「appRingodirective」が属性の名前になります。
つまり<p appRingodirective>という風に書くことで、こちらのディレクティブで作成した属性を使えます。

次にUPDATEされたapp.module.tsファイルを見てみましょう。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatDialogModule} from '@angular/material/dialog';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { WindowComponent } from './window/window.component';
import { FormsModule } from '@angular/forms';
import { RingodirectiveDirective } from './ringodirective.directive';


@NgModule({
  declarations: [
    AppComponent,
    WindowComponent,
    RingodirectiveDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

マーカーした部分が追記されました。
ディレクティブのインポート文を追加し、Moduleデコレータのdeclarationsにディレクティブを追記しています。
これによって、同じModuleに入っているコンポーネントにおいて、 appRingodirective 属性を使えるようになっています。

ディレクティブの編集

では実際にディレクティブを編集して、属性を作っていきましょう。

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

@Directive({
  selector: '[appRingodirective]'
})
export class RingodirectiveDirective {

  constructor(element: ElementRef) { 
    element.nativeElement.style.color = 'red';
    element.nativeElement.align = 'center';
  }

}

例えばこのように書いたとします。
そのうえで、このように書いたHTMLファイルがあったとします。

<p>林檎速報</p>
<p appRingodirective>林檎速報</p>

するとこのように表示されます。

作成したディレクティブの内容が反映されていますね。

@Inputを使う

@Inputを使うことで、今回作成したディレクティブに値を設定して使うことが出来ます。
例えばディレクティブをこのように修正します。

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

@Directive({
  selector: '[appRingodirective]'
})
export class RingodirectiveDirective {

  constructor(private element: ElementRef) { 
  }

  @Input() color:string = 'red';
  @Input() align:string = 'center';

  ngOnInit(){
    this.element.nativeElement.style.color = this.color;
    this.element.nativeElement.align = this.align;
  }

}

colorとalignというプロパティを追加し、初期値をredとcenterにしています。
これらがngOnInit()でElementに設定されます。
そして、color、alignに何か値を設定すればその値がElementに設定されるわけです。

<p>林檎速報</p>
<p appRingodirective>林檎速報</p>
<p appRingodirective color="green" align="right">林檎速報</p>

このようにcolor、alignを設定したものとしないものを比較してみましょう。

Inputした値が反映されていますね。

終わりに

今回ディレクティブを作っていきましたが、これを作っておくと良いこととして、他のコンポーネントでも作成したディレクティブを使えるということです。
例えばCSSを編集して同じようなことをしたとしても、他のコンポーネントには反映されません。
よく使うものであれば、ディレクティブを活用していくと楽にアプリを作れますし、管理も楽になります。
是非作ってみてください。

スポンサーリンク

Angular開発

Posted by 社畜林檎