Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung

Eines der aufregenden Features von Angular 14 ist, dass die eigenständigen Komponenten von Angular endlich da sind.

In Angular 14 können Entwickler versuchen, unabhängige Komponenten zu verwenden, um verschiedene Komponenten zu entwickeln. Es ist jedoch zu beachten, dass die API der unabhängigen Angular-Komponenten immer noch nicht stabil ist und es in Zukunft möglicherweise einige destruktive Updates geben wird. Daher wird dies nicht empfohlen Einsatz in einer Produktionsumgebung. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

So erstellen Sie eine unabhängige Komponente

: Wir können „standalone: ​​true“ zu @Component() hinzufügen und dann imports direkt ohne @NgModule() verwenden . Wenn Sie eine neue Komponente erstellen, können Sie ng generate component <name> --standalone verwenden, um direkt eine unabhängige Komponente zu erstellen, zum Beispiel:

ng generic Component Button-List --standalone

@Component({
  Selektor: 'app-button-list',  
  eigenständig: wahr,  
  Importe: [
    CommonModule,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
Die Exportklasse ButtonListComponent implementiert OnInit

und importiert vorhandene Module in unabhängige Komponenten.

Wir können vorhandene Module in imports hinzufügen, am Beispiel von MatButtonModule :

imports: [
    CommonModule,
    MatButtonModule,
],

damit wir die mat-button Komponente von MatButtonModule in ButtonListComponent verwenden können:

<button mat-button>Basic</button>
<button mat-button color="primary">Primär</button>
<button mat-button color="accent">Akzent</button>
<button mat-button color="warn">Warnung</button>
<button mat-button deaktiviert>Deaktiviert</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

Rendering:

zum Starten einer Angular-Anwendung mit unabhängigen Komponenten

besteht darin, AppComponent als unabhängige Komponente festzulegen:

@Component({
  Selektor: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  eigenständig: wahr,
})
export class AppComponent {

Der zweite Schritt besteht darin, die importierten Module in den Importen von AppModule zu den Importen von AppComponent hinzuzufügen. Es gibt jedoch zwei Modulausnahmen: BrowserModule und BrowserAnimationsModule .

Beim Import kann es zu Problemen kommen: ** BrowserModule wurden bereits geladen. Wenn Sie Zugriff auf allgemeine Anweisungen wie NgIf und NgFor benötigen, importieren Sie stattdessen das CommonModule .**:

Der dritte Schritt besteht darin, die Datei app.module.ts zu löschen.

Der letzte Schritt besteht darin, in main.ts zu importieren:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

geändert in:

bootstrapApplication(AppComponent).catch(err => console.error(err));

Auf diese Weise können wir unabhängige Komponenten verwenden, um Angular-Komponenten zu starten.

Konfigurieren Sie das Routing für unabhängige Komponenten

hier: HomeComponent , ButtonListComponent und ChipListComponent ,

und erstellen Sie dann das ROUTES- Objekt const ROUTES in main.ts

: Route[] = [
  {
      Weg: '',    
      pathMatch: 'full',    
      RedirectTo: 'Zuhause'
  },
  {
      Pfad: 'Zuhause',    
      Komponente:HomeComponent
  },
  {
      Pfad: 'Schaltfläche',    
      LoadComponent: () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      Pfad: 'Chip',    
      LoadComponent: () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

Unter anderem verwenden ButtonListComponent und ChipListComponent loadComponent , um das verzögerte Laden von Routen zu implementieren.

Verwenden Sie dann providers um RouterModule im zweiten Parameter von bootstrapApplication zu registrieren.

BootstrapApplication(AppComponent, {
  Anbieter: [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ],

=

> console.error(err));

Konfigurieren der Abhängigkeitsinjektion

Wenn wir eine Angular-Anwendung starten möchten, müssen wir möglicherweise einige Werte oder Dienste injizieren. In bootstrapApplication können wir Werte oder Dienste über providers registrieren.

Ich habe zum Beispiel eine URL zum Abrufen von Bildern, die in PhotoService eingefügt werden muss:

bootstrapApplication(AppComponent, {
  Anbieter: [
    {
          bereitstellen: 'photoUrl',      
          useValue: 'https://picsum.photos',
    },
    {provide: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
    importProvidersFrom(HttpClientModule)
  ],
})

PhotoService Code lautet wie folgt:

@Injectable()export class PhotosService {
  Konstruktor(
    @Inject('photoUrl') private photoUrl: string,
    privat http: HttpClient ) { }

  public getPhotoUrl(i: number): string {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Quellcode

In diesem Artikel verwendeter Quellcode: https://github.com/damingerdai/angular-standalone-components-app

Online-Demo:

https://damingerdai.github.io/angular-standalone-components-app/Originaltext Adresse: https://juejin.cn/post/7107224235914821662