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.