So verwenden Sie die Eingabekomponente

Dieses Mal zeige ich Ihnen, wie Sie die Eingabekomponente verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Eingabekomponente gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Komponenten sind ein sehr wichtiger Bestandteil von Angular. Der folgende Artikel stellt Ihnen die Angular-Eingabekomponente und deklarative Komponenten vor Der Unterschied zwischen den deklarativen Komponenten und den Eingabekomponenten von Angular spiegelt sich in den unterschiedlichen Lademethoden der beiden wider.

• Deklarative Komponenten werden über den von der Komponente deklarierten Selektor geladen

Die Eingabekomponente wird über den Komponententyp geladen dynamisches Laden

Deklarative Komponente

Die deklarative Komponente lädt die Komponente über den von der Komponente in der Vorlage deklarierten Selektor.

Beispiel

@Component({
 selector: 'a-cmp',
 template: `
 <p>这是A组件</p>
 `
})
export class AComponent {}

@Component({
 selector: 'b-cmp',
 template: `
 <p>在B组件里内嵌A组件：</p>
 <a-cmp></a-cmp>
 `
})
export class BComponent {}

Verwenden Sie in der Vorlage von BComponent die selector<a-cmp></a-cmp>-Deklaration, um AComponent zu laden.

Einstiegskomponente

Die Einstiegskomponente lädt die Komponente über die angegebene Komponentenklasse.

ist hauptsächlich in drei Kategorien unterteilt:

• Startkomponenten, die in @NgModule.bootstrap deklariert sind, wie z. B. AppComponent.

• Komponenten, auf die in der Routing-Konfiguration verwiesen wird

• Andere dynamische Komponenten, die programmgesteuert mithilfe von Komponententypen geladen werden

Start Komponente

app.component.ts

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

app.module.ts

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

Die im Bootstrap deklarierte AppComponent ist die Startkomponente. Obwohl wir die selector<app-root></app-root>-Position der Komponente in index.html verwenden, lädt Angular die AppComponent nicht basierend auf diesem Selektor. Hier kann es leicht zu Missverständnissen kommen. Da index.html zu keiner Komponentenvorlage gehört, muss Angular die Komponente programmgesteuert mithilfe des im Bootstrap deklarierten AppComponent-Typs laden, anstatt einen Selektor zu verwenden.

Da Angular AppComponent dynamisch lädt, ist jede AppComponent eine Einstiegskomponente.

Komponenten, auf die durch Routing-Konfiguration verwiesen wird

@Component({
 selector: 'app-nav',
 template: `
 <nav>
 <a routerLink="/home" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">首页</a>
 <a routerLink="/users" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">用户</a>
 </nav>
 <router-outlet></router-outlet>
 `
})
export class NavComponent {}

Wir müssen eine Route konfigurieren

const routes: Routes = [
 {
 path: "home",
 component: HomeComponent
 },
 {
 path: "user",
 component: UserComponent
 }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Angular lädt die durch die Route angegebene Komponentenklasse entsprechend der konfigurierten Route Leiten Sie die Komponente weiter, anstatt sie über den Selektor der Komponente zu laden.

Eingabekomponente konfigurieren

In Angular muss die Lagerkomponente in @NgModule.entryComponents konfiguriert werden.

Da es sich bei den in der Startkomponente und der Routing-Konfiguration referenzierten Komponenten um Einstiegskomponenten handelt, fügt Angular diese beiden Komponenten während der Kompilierung automatisch zu @NgModule.entryComponents hinzu. Für von uns selbst geschriebene dynamische Komponenten müssen wir sie manuell zu @NgModule.entryComponents hinzufügen.

@NgModule({ declarations: [  AppComponent ], imports: [  BrowserModule,  BrowserAnimationsModule,  AppRoutingModule ], providers: [], entryComponents:[DialogComponent], declarations:[] bootstrap: [AppComponent] }) export class AppModule { }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Knoten+Token zur Benutzerüberprüfung

So verwenden Sie scss in Angular-Projekten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Eingabekomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!