Angular Learning Vortrag über Routing (Routing)

In diesem Artikel lernen Sie Angular weiter, verstehen das Routing in Angular, stellen die grundlegende Verwendung des Routings vor und erfahren, wie Sie Parameter empfangen. Ich hoffe, dass es für alle hilfreich ist!

Umgebung:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Knoten: 12.18.3

• npm: 6.14.6

• IDE: Visual Studio Code

1. Zusammenfassung

Einfach ausgedrückt entsprechen unterschiedliche Adressen (URL) unterschiedlichen Seiten, was Routing darstellt. Wenn Sie außerdem auf die Vorwärts- und Zurück-Schaltflächen des Browsers klicken, navigiert der Browser in Ihrem Browserverlauf vorwärts oder rückwärts, wiederum basierend auf der Weiterleitung. [Empfohlene verwandte Tutorials: „Angular Tutorial“]

In Angular ist Router ein unabhängiges Modul, das im @angular/router-Modul definiert ist.

• Router kann mit NgModule für das verzögerte Laden von Modulen zusammenarbeiten. , Vorladevorgang (siehe „Angular Getting Started to Mastering Series Tutorials (11) – Modul (NgModule), Delayed Loading Module“); Bauteile zerstören.

• Für ein neues AngularCLI-basiertes Projekt können Sie das AppRoutingModule standardmäßig über die Option während der Initialisierung zu app.component.ts hinzufügen.

2. Grundlegende Verwendung von Router

2.2. Route registrieren

ng g c page1
ng g c page2

Wie Sie sehen, sind für die einfache Routenregistrierung nur zwei Attribute erforderlich, Pfad und Komponente, die jeweils den relativen Pfad der Route und die Antwortkomponente dieser Route definieren. 2.3. Verwendung in HTML

//src\app\app-routing.module.ts
const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Verwenden Sie in der HTML-Vorlage direkt das routerLink-Attribut und identifizieren Sie die Route als Winkel. Nach dem Ausführen des Codes werden zwei Hyperlinks angezeigt: Seite1 und Seite2. Klicken Sie, um zu sehen, dass die Adresse der Adressleiste in http://localhost:4200/page2 oder http://localhost:4200/page1 geändert wurde in Seite 1 und Seite 2. Wechseln

2.4 Verwendung im TS-Code

Manchmal ist es notwendig, basierend auf der Geschäftslogik in TS zu springen. In ts muss eine Router-Instanz eingefügt werden, z. B.

<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>

Jump-Code:

constructor(private router: Router) {}

3. Parameter im Pfad

Im Allgemeinen verwenden wir Parameter als Parameter Der URL-Abschnitt, z. B. /users/1, stellt den Benutzer dar, dessen ID 1 ist. Die Route wird im Stil von „/users/id“ definiert.

Für unsere einfache Seite kann beispielsweise unsere Seite Seite1 den ID-Parameter übergeben. Dann müssen wir unser Routing wie folgt ändern:

  // 跳转到 /page1
  this.router.navigate(['/page1']);

  // 跳转到 /page1/123
  this.router.navigate(['/page1', 123]);

ts Wenn der Code die Parameter liest, müssen Sie zuerst ActivatedRoute injizieren. Der Code lautet wie folgt folgt:

const routes: Routes = [
  {
    path: 'page1/:id',    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: 'page1',        
    redirectTo: 'page1/',   // 跳转到'page1/:id'
  },
  {
    path: 'page2',
    component: Page2Component,
  },
];

3.2. Es gibt eine andere Möglichkeit, den Parameter

in den Parameter (QueryParameter) zu schreiben, z. B. http://localhost:4200/?name=cat, also nach der URL-Adresse , fügen Sie ein Fragezeichen „?“ hinzu und fügen Sie dann den Parameternamen und den Parameterwert („name=cat“) hinzu. Dies wird als Abfrageparameter (QueryParameter) bezeichnet.

Wenn dieser Abfrageparameter verwendet wird, ähnelt er dem vorherigen Routing-Parameter, außer dass paramMap in queryParamMap geändert wird. Der Code lautet wie folgt:

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log('Parameter id: ', params.get('id'));

    // 地址 http://localhost:4200/page1/33   
    // 控制台输出：Query Parameter name:  33

    // 地址 http://localhost:4200/page1/     
    // 控制台输出：Query Parameter name:   (实际结果为undefined)
  });
}

4 unterscheidet sich vom herkömmlichen rein statischen Format (html) Websites in Angular Die URL entspricht keiner echten Datei (Seite), da Anuglar den Routing-Prozess übernimmt, um zu entscheiden, welche Komponente dem Endbenutzer angezeigt werden soll. Um sich an verschiedene Szenarien anzupassen, verfügt Angular über zwei URL-Pfad-Anzeigeformate:

http://localhost:4200/page1/123

http://localhost:4200/#/page1/123

Der Standardwert ist der erste ohne #. Bei Bedarf können Sie zu app-routing.ts hinzufügen, z. B.:

this.activatedRoute.queryParamMap.subscribe((params) => {
  console.log('Query Parameter name: ', params.get('name'));

  // 地址 http://localhost:4200/page1?name=cat
  // 控制台输出：Query Parameter name:  cat

  // 地址 http://localhost:4200/page1/
  // 控制台输出：Query Parameter name:   (实际结果为undefined)
});

5. Während der Bereitstellung aufgetretene Probleme

Ähnlich, da Anuglar die Routing-Verarbeitung (Routing) übernimmt, stellen Sie es bei der Bereitstellung auf Servern wie z da iis, nginx usw. unterschiedliche Techniken (Anforderungen) haben, detaillierte Referenz:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure -your -server-to-work-with-html5mode

6. Zusammenfassung

• angular unterstützt standardmäßig kein optionales Routing (z. B. /user/:id?), aber wir können zwei Routen definieren, die auf dieselbe Verwendung verweisen eine Komponente, um dies zu implementieren und die Wiederverwendung von Code zu erreichen;

• Beim Lesen von Parametern müssen Sie sich anmelden und können nicht direkt gelesen werden.

• Informationen zu Bereitstellungsproblemen nach dem Packen finden Sie im offiziellen WLAN (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to -work -with-html5mode)

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonAngular Learning Vortrag über Routing (Routing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!