typescript - Angular 6: Varför fungerar HttpClient även utan att importera HttpClientModule?


Jag installerade ett grundläggande Angular 6-projekt genom att köra ng new first-project och jag fick en standard app-modul och komponent. Nu skapade jag en ny modul och en komponent inom den genom att köra ng generate module view och ng generate component view/view. Nu ser min app.module.ts ut så här

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestService } from './test.service';
import { ViewModule } from './view/view.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        ViewModule
    ],
    providers: [
        TestService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

vy.modul.ts

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ViewComponent } from './view/view.component';

@NgModule({
    declarations: [ViewComponent],
    imports: [
        CommonModule,
        FormsModule
    ],
    exports: [
        ViewComponent
    ]
})
export class ViewModule { }

vy.komponent.ts

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {

    username: string = "";
    response: any;

    constructor (private http: HttpClient) { }

    search () {
        this.http.get('https://api.github.com/users/' + this.username)
        .subscribe((response) => {
            this.response = response;
            console.log(this.response);
        });
    }

}

Så saken är den, jag importerade inte HttpClientModule inne i view.module.ts utan gjorde det istället inne i app.module.ts och jag importerade direkt HttpClient inne i view.component.ts och jag fick till och med ett svar framgångsrikt. För att testa om detta händer regelbundet, tog jag bort FormsModule-importen från view.module.ts för att se om [(ngModel)] som jag använder inne i view.component.html fortfarande fungerar, eftersom jag redan importerade FormsModule inne i app.module.ts, men det gör det inte.

Min fråga är varför HttpClientModule låter mig importera det och använda det i olika moduler och varför de andra modulerna inte fungerar på det sättet? Jag försökte hitta en anledning online men kunde inte hitta någon. Kan någon vänligen berätta anledningen? Tack.

Ytterligare information: 1. HttpClient fungerar inte om jag inte importerar HttpClientModule någonstans. Så modulen måste importeras någonstans inom projektet. 2. Det fungerar också åt andra hållet, dvs. genom att importera modulen i view.module.ts och använda den i app.component.ts. Detta betyder att jag kan använda HttpClient över hela projektet genom att bara importera modulen en gång.

Svar #1

Enligt den officiella dokumentationen för Angular är man inte tvungen att importera HttpClientModule i din view.module.ts, så länge du importerar det i din AppModule.ts.

Här är ett citat från sidan:

Innan du kan använda HttpClient behöver du importera Angular HttpClientModule. De flesta appar gör detta i rotens AppModule. När du har importerat HttpClientModule till AppModule kan du injicera HttpClient i en applikationsklass som visas i följande ConfigService-exempel.

Relaterade artiklar