Angular 2
अवयव

परिचय

एक साधारण घटक

एक घटक बनाने के लिए हम कुछ मापदंडों को पारित करने वाले वर्ग में @Component डेकोरेटर जोड़ते हैं:

• providers : संसाधन जो घटक निर्माता में इंजेक्ट किए जाएंगे
• selector : क्वेरी चयनकर्ता जो HTML में तत्व को खोजेगा और घटक द्वारा प्रतिस्थापित करेगा
• styles : इनलाइन शैलियों। नोट: आवश्यकता के साथ इस पैरामीटर का उपयोग न करें, यह विकास पर काम करता है लेकिन जब आप उत्पादन में एप्लिकेशन का निर्माण करते हैं तो आपकी सभी शैलियाँ खो जाती हैं
• 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 में घोषित की गई शैली आपकी एप्लिकेशन शैली फ़ाइल से भिन्न @Component हैं, घटक में लागू कुछ भी इस दायरे तक सीमित रहेगा। उदाहरण के लिए, आप कहते हैं:

div { background: red; }

घटक के अंदर के सभी div लाल होंगे, लेकिन यदि आपके पास अन्य घटक हैं, तो आपके HTML में अन्य divs को परिवर्तित नहीं किया जाएगा।

उत्पन्न कोड इस तरह दिखेगा:

आप दो तरीकों से एक घटक में शैलियाँ जोड़ सकते हैं:

फ़ाइल पथों की एक सरणी पास करना

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