javascript - Angular2 - Hur skiljer sig modul från komponent?

I koden nedan från ../src/app/app.module.ts,

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

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

Komponenten består av:

  • visa(../src/app/app.component.html)

  • logik(../src/app/app.component.ts)

  • stil(../src/app/app.component.css)

En Angular-applikation är ett träd av komponenter. Bra komponenter har hög sammanhållning, dvs. varje komponent innehåller endast element med relaterad funktionalitet. De är också väl inkapslade och löst kopplade.

Hur skiljer sig moduler från komponenter?

Svar #1

En komponent är bara en klass med @Component()-annoteringen. Observera att .html- och .css-filer kan refereras av komponenten, det är absolut inget krav. Komponentens mall kan mycket väl vara 'inbäddad' direkt i komponentkonfigurationen, eller så kanske det helt enkelt inte finns någon html-mall alls för en viss komponent.

En modul är ett strukturellt element i en Angular-applikation (och kanske andra klasser och gränssnitt). Det är också "bara en klass" med @NgModule()-annoteringen.

Det fungerar som en logisk 'behållare' för dina komponenter, direktiv, tjänster, pipor osv. för att hjälpa dig strukturera din övergripande källkod bättre.

Du kan ta en titt på denna befintliga fråga: Vad är skillnaden mellan en Angular-komponent och ett modul

Svar #2

Ett modul är något som har komponenter. Det paketerar dem så att du kan importera och hantera dem.

Observera att när du skapar en komponent kan du lägga allt som är dekorerat som @Injectable i din konstruktor:

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

  constructor(private myService: MyService) { }

  ngOnInit() {
  }

}

Och magiskt kommer du att ha en myService att använda. Detta är beroendeinjektion, som är inbyggd i Angular - men den hanteras på en Module-nivå. I ditt modul importerar du vilka andra moduler du vill kunna använda:

imports: [
  BrowserModule,
  FormsModule
],

definiera vad din modul innehåller:

declarations: [
  AppComponent,
  HeroesComponent,
  MyService
],

exportera vilka komponenter som helst (så att andra moduler kan importera dem)

exports: [
  HeroesComponent
],

De hjälper till att organisera en applikation i funktionalitetsblock. Komponenter är saker som berättar för Angular hur något ska renderas. Moduler sätter ihop Komponenter, Pipes, Services osv. till 'block' som kan kompileras av Angular eller importeras och användas av andra.

Redigera för att ta itu med kommentaren

När det gäller din specifika fråga om HttpClient. HttpClient är tjänsten du använder för att utföra åtgärderna. HttpClientModule är modulen du importerar till din modul, så att du kan använda tjänsten den innehåller.

Du importerar modulen:

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})

Och använd tjänsten:

@Component(...)
export class MyComponent implements OnInit {
 
  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ...
}

HttpClientModule innehåller allt du behöver för att HttpClient ska fungera, och paketerar det så att du kan använda det i dina egna projekt.

Detta särskilda modul samlar endast den tjänsten, men modulen kan innehålla en massa relaterade tjänster, komponenter, pipes eller direktiv. Till exempel gör RouterModule att du kan använda RouterOutlet och RouterLink-direktiven.

Relaterade artiklar