Eine kurze Analyse des Angular-Learning-Routings

Dieser Artikel führt Sie in das Verständnis des Routings in Angular ein, stellt die grundlegende Verwendung des Routings vor und zeigt Ihnen, wie Sie Parameter empfangen. Ich hoffe, dass er 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. [Verwandte Tutorial-Empfehlungen: „Angular Tutorial“]

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

1. 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“);
2. Der Router verwaltet den Lebenszyklus von Komponenten und ist für die Erstellung und Zerstörung von Komponenten verantwortlich.

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

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. Wechseln2.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 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: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Angular-Learning-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!