So verwenden Sie die Router-Anwendung in Angular

Dieses Mal zeige ich Ihnen, wie Sie die Router-(Routing-)Anwendung in Angular verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie die Router-(Routing-)Anwendung in Angular verwenden? Schauen Sie mal rein.

Vorwort:

Das Springen zwischen Angular APP-Ansichten hängt vom Router ab (Routing). In diesem Kapitel werden wir über die Anwendung des Routers sprechen

Erklärung mit Beispielen

Die Laufergebnisse sind wie folgt. Es sind drei Navigationsleisten eingerichtet: Startseite, Info und Dashboard. Klicken Sie auf verschiedene Navigationsleisten, um zur entsprechenden Seite zu springen:

3 Komponenten erstellen

1. ng g c home

2. ng g c about

3. ng g c-Dashboard

Routing und Konfiguration

(1) **Angular Router einführen **

Wenn Sie Angular Router verwenden, müssen Sie RouterModul wie folgt einführen:

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) Routing Konfiguration

Denken Sie daran, wer die Komponente verwaltet? Ja, sie wird vom Modul verwaltet. Führen Sie daher die neu erstellte Komponente in app.moudle ein. Wie folgt:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Tipp: Achten Sie auf den Pfad der Komponente. Zur einfacheren Verwaltung haben wir die neu erstellte Komponente in den Komponentenordner verschoben.

Router-Konfigurationsdatei erstellen

Erstellen Sie im App-Verzeichnis die Datei routerConfig.ts. Der Code lautet wie folgt:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

Hinweis: Angular 2.X und höher beginnen mit der Verwendung von TypeScript zum Schreiben von Code anstelle von JavaScript, daher lautet das Suffix der Datei: ts anstelle von js

Wie rufe ich diese RouterConfigue-Datei auf? Es muss in app.module.ts geladen werden, da app.moudle.ts der Eingang zur gesamten Angular-App ist.

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Declare Router Outlet

Fügen Sie in der Datei app.component.html den Code hinzu:

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Run

Geben Sie den Pfad ein, in dem sich das Projekt befindet, und führen Sie es aus.

ng serve --open

Wenn das Webpack erfolgreich kompiliert wurde, geben Sie in die Adressleiste des Browsers ein: http://localhost:4200

Das Die Ergebnisse können Sie am Anfang dieses Artikels sehen.

Bezüglich Router ändern Sie die Schreibmethode:

In der Datei app.moudle.ts lautet der Code wie folgt:

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

In diesem Auf diese Weise können Sie keine separate Datei routerConfigure.ts erstellen.

Zusammenfassung

Seit der Einführung der komponentenorientierten (Komponenten-)Routing-Verwaltung ist die Routing-Verwaltung viel komfortabler als AngularJS (1.X).

Weitere Optimierung:

Vielleicht ist Ihnen aufgefallen, dass beim Zugriff auf http://localhost:4200 der Pfad „/“ sein sollte und wir diesen Standardpfad festlegen sollten.

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

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:

So verwenden Sie JS zum dynamischen Hinzufügen von HTML-Tags

Verwenden von React Router v4 von Grund auf

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