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 파일입니다.

다음과 같은 두 가지 방법으로 템플릿을 지정할 수 있습니다.

템플릿을 파일 경로로 전달

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

템플릿을 인라인 코드로 전달

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

템플릿에는 스타일이 포함될 수 있습니다. @Component 선언 된 스타일은 응용 프로그램 스타일 파일과 다르므로 구성 요소에 적용된 모든 내용이이 범위로 제한됩니다. 예를 들어 다음과 같이 추가한다고 가정 해보십시오.

div { background: red; }

구성 요소 안의 모든 div 는 빨간색이지만 다른 구성 요소가있는 경우 HTML의 다른 div는 전혀 변경되지 않습니다.

생성 된 코드는 다음과 같습니다.

다음 두 가지 방법으로 구성 요소에 스타일을 추가 할 수 있습니다.

파일 경로 배열 전달

@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 = '';
}