Dodawanie komponentów, potoków i usług do modułu

W poprzednim rozdziale dowiedzieliśmy się, jak stworzyć moduł z jednym komponentem. Nasze moduły składają się jednak zazwyczaj z wielu komponentów, usług, dyrektyw i potoków. Pokażemy jak je dołączyć.

Zacznijmy od zdefiniowania nowego komponentu, którego użyjemy do wyświetlenia informacji o karcie kredytowej.

credit-card.component.ts

import { Component, OnInit } from '@angular/core';
import { CreditCardService } from './credit-card.service';

@Component({
  selector: 'app-credit-card',
  template: `
    <p>Your credit card is: {{ creditCardNumber | creditCardMask }}</p>
  `
})
export class CreditCardComponent implements OnInit {
  creditCardNumber: string;

  constructor(private creditCardService: CreditCardService) {}

  ngOnInit() {
    this.creditCardNumber = this.creditCardService.getCreditCard();
  }
}

Ten komponent zawiera klasę CreditCardService, pobierającą numer karty kredytowej z wykorzystaniem potoku creditCardMask.

credit-card.service.ts

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

@Injectable()
export class CreditCardService {
  getCreditCard(): string {
    return '2131313133123174098';
  }
}

credit-card-mask.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'creditCardMask'
})
export class CreditCardMaskPipe implements PipeTransform {
  transform(plainCreditCard: string): string {
    const visibleDigits = 4;
    let maskedSection = plainCreditCard.slice(0, -visibleDigits);
    let visibleSection = plainCreditCard.slice(-visibleDigits);
    return maskedSection.replace(/./g, '*') + visibleSection;
  }
}

Gdy wszystko jest już gotowe, możemy teraz użyć CreditCardComponent w naszym głównym komponencie.

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>My Angular App</h1>
    <app-credit-card></app-credit-card>
  `
})
export class AppComponent {}

Oczywiście, aby móc korzystać z tego nowego komponentu, potoki i usługi, musimy dopisa do modułu.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { CreditCardMaskPipe } from './credit-card-mask.pipe';
import { CreditCardService } from './credit-card.service';
import { CreditCardComponent } from './credit-card.component';

@NgModule({
  imports: [BrowserModule],
  providers: [CreditCardService],
  declarations: [
    AppComponent,
    CreditCardMaskPipe,
    CreditCardComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Zauważ, że dodaliśmy komponent CreditCardComponent i potok CreditCardMaskPipe do właściwości declarations, wraz z głównym komponentem modułuAppComponent. Z drugiej strony nasza usługa niestandardowa jest skonfigurowana za pomocą systemu wstrzykiwania zależności z właściwością providers.

Zobacz przykład [013]

Należy pamiętać, że ta metoda definiowania usługi w własności providers powinna być używana tylko w module głównym . Wykonanie tego w module funkcji spowoduje niezamierzone konsekwencje podczas pracy z leniwym ładowaniem modułów.