Lassen Sie uns über das Routing in Angular sprechen

Dieser Artikel stellt Ihnen das Routing in Angular vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual. Studio Code

1. Zusammenfassung

Einfach ausgedrückt entsprechen in der Adressleiste 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 des Routers 2.1. Vorbereitung

2.2. Route registrieren

ng g c page1
ng g c page2

Nach dem Login kopieren

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-CodeManchmal 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

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

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

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

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)
  });
}

Nach dem Login kopieren

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)
});

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 erreichen und die Wiederverwendung von Code zu erreichen.
Sie können den useHash-Parameter verwenden, um ein # vor dem Augular-Pfad hinzuzufügen Lesen.

• Bei Bereitstellungsproblemen nach dem Packen überprüfen Sie das offizielle 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 vonLassen Sie uns über das Routing in Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!