Angular 2
コンポーネント

前書き

シンプルなコンポーネント

コンポーネントを作成するために、 @Componentデコレータをいくつかのパラメータを渡すクラスに追加します：

• providers ：コンポーネントコンストラクタに注入されるリソース
• selector ：HTML内の要素を見つけてコンポーネントで置き換えるクエリセレクタ
• styles ：インラインスタイル。注：このパラメータはrequireと一緒に使用しないでください。開発時には動作しますが、プロダクションでアプリケーションをビルドするときにはすべてのスタイルが失われます。
• styleUrls ：スタイルファイルへのパスの配列
• template ：HTMLを含む文字列
• templateUrl ：HTMLファイルへのパス

あなたが設定できる他のパラメータがありますが、リストされているものがあなたが最も使用するものです。

簡単な例：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-required',
  styleUrls: ['required.component.scss'],
  // template: `This field is required.`,
  templateUrl: 'required.component.html',
})
export class RequiredComponent { }

テンプレートとスタイル

テンプレートはロジックを含むHTMLファイルです。

テンプレートは次の2つの方法で指定できます。

テンプレートをファイルパスとして渡す

@Component({
  templateUrl: 'hero.component.html',
})

テンプレートをインラインコードとして渡す

@Component({
  template: `<div>My template here</div>`,
})

テンプレートにスタイルを含めることができます。 @Component宣言されたスタイルはアプリケーションスタイルファイルとは異なります。コンポーネントに適用されるものはすべてこのスコープに限定されます。たとえば、次のように追加します。

div { background: red; }

コンポーネント内のすべてのdivは赤色になりますが、他のコンポーネントがある場合、HTML内の他のdivはまったく変更されません。

生成されたコードは次のようになります。

コンポーネントにスタイルを追加するには、次の2つの方法があります。

ファイルパスの配列を渡す

@Component({
  styleUrls: ['hero.component.css'],
})

インラインコードの配列を渡す

styles: [ `div { background: lime; }` ]

requireを持つstylesは、アプリケーションを実稼働環境に構築するときには機能しないので使用しないでください。

コンポーネントのテスト

hero.component.html

<form (ngSubmit)="submit($event)" [formGroup]="form" novalidate>
  <input type="text" formControlName="name" />
  <button type="submit">Show hero name</button>
</form>

hero.component.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

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

@Component({
  selector: 'app-hero',
  templateUrl: 'hero.component.html',
})
export class HeroComponent {
  public form = new FormGroup({
    name: new FormControl('', Validators.required),
  });

  submit(event) {
    console.log(event);
    console.log(this.form.controls.name.value);
  }
}

hero.component.spec.ts

import { ComponentFixture, TestBed, async } from '@angular/core/testing';

import { HeroComponent } from './hero.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('HeroComponent', () => {
  let component: HeroComponent;
  let fixture: ComponentFixture<HeroComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HeroComponent],
      imports: [ReactiveFormsModule],
    }).compileComponents();

    fixture = TestBed.createComponent(HeroComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should be created', () => {
    expect(component).toBeTruthy();
  });

  it('should log hero name in the console when user submit form', async(() => {
    const heroName = 'Saitama';
    const element = <HTMLFormElement>fixture.debugElement.nativeElement.querySelector('form');

    spyOn(console, 'log').and.callThrough();

    component.form.controls['name'].setValue(heroName);

    element.querySelector('button').click();

    fixture.whenStable().then(() => {
      fixture.detectChanges();
      expect(console.log).toHaveBeenCalledWith(heroName);
    });
  }));

  it('should validate name field as required', () => {
    component.form.controls['name'].setValue('');
    expect(component.form.invalid).toBeTruthy();
  });
});

ネスティングコンポーネント

コンポーネントはそれぞれのselectorでレンダリングされるので、コンポーネントをネストするために使用できます。

メッセージを表示するコンポーネントがある場合は、次のようにします。

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

@Component({
  selector: 'app-required',
  template: `{{name}} is required.`
})
export class RequiredComponent {
  @Input()
  public name: String = '';
}

app-required （このコンポーネントのセレクタ）を使用して、別のコンポーネントの内部で使用できます。

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

@Component({
  selector: 'app-sample',
  template: `
    <input type="text" name="heroName" />
    <app-required name="Hero Name"></app-required>
  `
})
export class RequiredComponent {
  @Input()
  public name: String = '';
}