Detaillierte Erläuterung der Verwendung von Angular-Eingabekomponenten und deklarativen Komponenten

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Angular-Eingabekomponenten und deklarativen Komponenten geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Angular-Eingabekomponenten und deklarativen Komponenten? Schauen Sie mal rein.

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:

• at@Ng<a href="http://www.php.cn/code/8212.%20html%20" target="_blank">Module<code>@Ng<a href="http://www.php.cn/code/8212.html" target="_blank">Module</a>.<a href="http://www.php.cn/wiki/1505.html" target="_blank">bootstrap</a>.bootstrap

  Starten Sie a Komponente wie AppComponent.

• In der Routing-Konfiguration Referenzen

  s Komponente

• andere werden programmgesteuert mithilfe von Komponententypen geladen Dynamische Komponente

Startkomponente

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 { }

selector<app-root></app-root> im Bootstrap Die deklarierte AppComponent ist die Startkomponente. Obwohl wir die -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

@NgModule.entryComponentsIn Angular muss die Lagerkomponente in

konfiguriert werden.

@NgModule.entryComponentsDa 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

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:

Verwendung des eleganten Modus von CSS-Modulen

Detaillierte Erklärung der Verwendung von vue-cli multi -Modulverpackung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Angular-Eingabekomponenten und deklarativen Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!