Fallvergleich von Angular-Eingabekomponenten und deklarativen Komponenten

Dieses Mal zeige ich Ihnen einen Vergleich von Angular-Eingabekomponenten und deklarativen Komponentenfällen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Angular-Eingabekomponenten und deklarativen Komponentenfällen? sehen.

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

-Deklaration, um AComponent zu laden. selector<a-cmp></a-cmp>

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<p style="text-align: left;">.<a href="http://www.php.cn/wiki/1505.html" target="_blank">bootstrap<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>
  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 { }

im Bootstrap Die 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:

Wie man mit dem Konflikt zwischen Doppelklick- und Klickereignissen in JS umgeht

Anleitung Schreiben Sie ein benutzerdefiniertes Skript mit Vue Define Component

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