In Angular以模块为单位, und jedes Modul kann sein eigenes Routing haben. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]
1. Erstellen Sie Seitenkomponenten, Layoutkomponenten und Navigationskomponenten für die Routing-Nutzung
Erstellen Sie die Homepage -Komponente ng gc pages/home
Erstellen Sie die Seitenkomponente „Über uns“ ng gc pages/about
Erstellen Sie die Layoutkomponente ng gc pages/layout
Erstellen Sie die Navigationskomponente ng gc pages/navigation
2. Erstellen Sie Routing-Regeln
// app.module. ts
{Routen} aus „@angular/router“ importieren
const Routen: Routen = [
{
Pfad: „Zuhause“,
Komponente:HomeComponent
},
{
Pfad: „ungefähr“,
Komponente: AboutComponent
}
] 3. Führen Sie das Routing-Modul ein und starten Sie
// app.module.ts
importiere { RouterModule, Routes } aus „@angular/router“
@NgModule({
Importe: [RouterModule.forRoot(routes, { useHash: true })],
})
Exportklasse AppModule {} 4. Fügen Sie路由插座hinzu
<!-- Der Routing-Socket, dh die Routing-Komponente, die mit der Platzhalterkomponente übereinstimmt, wird hier angezeigt --> <router-outlet></router-outlet>5. Definieren Sie den Link
<a routerLink="/home">Homepage</a>
in der Navigationskomponente
<a routerLink="/about">Über uns</a>
1. Umleiten
const Routen: Routen = [
{
Pfad: „Zuhause“,
Komponente:HomeComponent
},
{
Pfad: „ungefähr“,
Komponente: AboutComponent
},
{
Weg: "",
// Weiterleiten weitergeleitet an: „home“,
//Genaue Übereinstimmung pathMatch: „full“
}
] 2. 404-Seiten-
Const-Routen: Routes = [
{
Pfad: „Zuhause“,
Komponente:HomeComponent
},
{
Pfad: „ungefähr“,
Komponente: AboutComponent
},
{
Weg: "**",
Komponente: NotFoundComponent
}
] 1. Parameter abfragen
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">Über uns</a> import { ActivatedRoute } from "@angular/router"
Die Exportklasse AboutComponent implementiert OnInit {
Konstruktor(private Route: ActivatedRoute) {}
ngOnInit(): void {
this.route.queryParamMap.subscribe(query => {
query.get("name")
})
}
} 2. Dynamische Parameter
const Routen: Routes = [
{
Pfad: „Zuhause“,
Komponente:HomeComponent
},
{
Pfad: „about/:name“,
Komponente: AboutComponent
}
] <a [routerLink]="['/about', 'zhangsan']">Über uns</a>
import { ActivatedRoute } from "@angular/router"
Die Exportklasse AboutComponent implementiert OnInit {
Konstruktor(private Route: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
params.get("name")
})
}
} Die Verschachtelung von Routen bezieht sich auf die定义子级路由.
const Routen: Routen = [
{
Pfad: „ungefähr“,
Komponente: AboutComponent,
Kinder: [
{
Pfad: „vorstellen“,
Komponente: IntroduceComponent
},
{
Pfad: „Geschichte“,
Komponente: HistoryComponent
}
]
}
] <!-- about.component.html -->
<App-Layout>
<p>über Werke!</p>
<a routerLink="/about/introduce">Firmenprofil</a>
<a routerLink="/about/history">Entwicklungsverlauf</a>
<div>
<router-outlet></router-outlet>
</div>
</app-layout> Benennen Sie den Socket
Stellen Sie untergeordnete Routing-Komponenten in verschiedenen Routing-Ausgängen bereit.
{
Pfad: „ungefähr“,
Komponente: AboutComponent,
Kinder: [
{
Pfad: „vorstellen“,
Komponente: IntroduceComponent,
Ausgang: „links“
},
{
Pfad: „Geschichte“,
Komponente: HistoryComponent,
Auslass: „richtig“
}
]
} <!-- about.component.html --> <App-Layout> <p>über Werke!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<a
[routerLink]="[
'/um',
{
Verkaufsstellen: {
links: ['vorstellen'],
rechts: ['Geschichte']
}
}
]"
>Über uns</a> <!-- app.component.html --> <button (click)="jump()">Zum Entwicklungsverlauf springen</button>
// app.component.ts
{ Router } aus „@angular/router“ importieren
Exportklasse HomeComponent {
Konstruktor(privater Router: Router) {}
springen() {
this.router.navigate(["/about/history"], {
queryParams: {
Name: „Kätzchen“
}
})
}
} Abstrahieren Sie die Routing-Konfiguration im Root-Modul in ein separates Routing-Modul,根路由模块genannt wird, und führen Sie dann das Root-Routing-Modul in das Root-Modul ein.
{ NgModule } aus „@angular/core“ importieren
{ HomeComponent } aus „./pages/home/home.component“ importieren
importiere { NotFoundComponent } aus „./pages/not-found/not-found.component“
const Routen: Routen = [
{
Weg: "",
Komponente:HomeComponent
},
{
Weg: "**",
Komponente: NotFoundComponent
}
]
@NgModule({
Erklärungen: [],
Importe: [RouterModule.forRoot(routes, { useHash: true })],
// Exportieren Sie das Angular-Routing-Funktionsmodul, da die im RouterModule-Modul bereitgestellte Routing-Socket-Komponente in der Root-Komponente des Root-Moduls verwendet wird. Exporte: [RouterModule]
})
export class AppRoutingModule {} import { BrowserModule } from „@angular/platform-browser“
{ NgModule } aus „@angular/core“ importieren
{AppComponent} aus „./app.component“ importieren
importiere { AppRoutingModule } aus „./app-routing.module“
{ HomeComponent } aus „./pages/home/home.component“ importieren
importiere { NotFoundComponent } aus „./pages/not-found/not-found.component“
@NgModule({
Deklarationen: [AppComponent, HomeComponent, NotFoundComponent],
Importe: [BrowserModule, AppRoutingModule],
Anbieter: [],
Bootstrap: [AppComponent]
})
Exportklasse AppModule {} Das verzögerte Laden von Routen basiert auf模块.
1. Erstellen Sie das Benutzermodul ng gm user --routing=true und erstellen Sie gemeinsam das Routingmodul dieses Moduls.
2. Erstellen Sie die Anmeldeseitenkomponente ng gc user/pages/login
3. Erstellen Sie die Registrierungsseitenkomponente ng gc user/pages/register
4. Konfiguration Routing-Regeln für Benutzermodule
import { NgModule } from „@angular/core“
importiere { Routes, RouterModule } aus „@angular/router“
importiere { LoginComponent } aus „./pages/login/login.component“
importiere { RegisterComponent } aus „./pages/register/register.component“
const Routen: Routen = [
{
Pfad: „Anmelden“,
Komponente: LoginComponent
},
{
Pfad: „registrieren“,
Komponente: RegisterComponent
}
]
@NgModule({
Importe: [RouterModule.forChild(routes)],
Exporte: [RouterModule]
})
export class UserRoutingModule {} 5. Ordnen Sie das Benutzer-Routing-Modul dem Haupt-Routing-Modul
// app-routing.module.tszu
const Routen: Routen = [
{
Pfad: „Benutzer“,
LoadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
] 6. Fügen Sie den Zugangslink <a routerLink="/user/login">Login</a>
in der Navigationskomponente
hinzu<a routerLink="/user/register">Registrieren</a>
Der Routenwächter teilt der Route mit, ob die Navigation zur angeforderten Route erlaubt ist.
Routenschutzmethoden können boolean oder Observable <boolean> oder Promise <boolean> zurückgeben, die zu einem späteren Zeitpunkt in einen booleschen Wert aufgelöst werden.
1. CanActivate
prüft是否可以访问某一个路由.
CanActivate为接口, und die Route Guard-Klasse muss diese Schnittstelle implementieren. Diese Schnittstelle legt fest, dass die Klasse über eine canActivate-Methode verfügen muss, die bestimmt, ob der Zugriff auf die Zielroute zulässig ist.
Eine Route kann多个守卫anwenden. Wenn alle Guard-Methoden zulässig sind, ist der Zugriff auf die Route zulässig. Wenn eine Guard-Methode nicht zulässig ist, ist der Zugriff auf die Route nicht zulässig.
Routenwächter erstellen: ng g guard guards/auth
Import { Injectable } from „@angular/core“
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } aus „@angular/router“
importiere { Observable } aus „rxjs“
@Injectable({
bereitgestelltIn: „root“
})
Die Exportklasse AuthGuard implementiert CanActivate {
Konstruktor(privater Router: Router) {}
canActivate(): boolean |. UrlTree {
// Wird verwendet, um einen Sprung zu implementieren. return this.router.createUrlTree(["/user/login"])
// Zugriff auf die Zielroute deaktivieren, false zurückgeben
//Zugriff auf Zielroute zulassen, true zurückgeben
}
} {
Pfad: „ungefähr“,
Komponente: AboutComponent,
canActivate: [AuthGuard]
} 2. CanActivateChild
prüft, ob der Benutzer auf eine bestimmte Unterroute zugreifen kann.
Erstellen Sie einen Routenwächter: ng g guard guards/admin Hinweis: Um CanActivateChild auszuwählen, bewegen Sie den Pfeil auf diese Option und tippen Sie auf die Leertaste, um die Auswahl zu bestätigen.
{Injectable} aus „@angular/core“ importieren
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } aus „@angular/router“
importiere { Observable } aus „rxjs“
@Injectable({
bereitgestelltIn: „root“
})
Exportklasse AdminGuard implementiert CanActivateChild {
canActivateChild(): boolean |.
Rückkehr wahr
}
} {
Pfad: „ungefähr“,
Komponente: AboutComponent,
canActivateChild: [AdminGuard],
Kinder: [
{
Pfad: „vorstellen“,
Komponente: IntroduceComponent
}
]
} 3. CanDeactivate
prüft, ob der Benutzer die Route verlassen kann.
Wenn beispielsweise der vom Benutzer im Formular eingegebene Inhalt nicht gespeichert wird und der Benutzer die Route verlassen möchte, kann der Wachmann gerufen werden, um den Benutzer dazu aufzufordern.
{Injectable} aus „@angular/core“ importieren
importieren {
KannDeaktivieren,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree
} von „@angular/router“
importiere { Observable } aus „rxjs“
Exportschnittstelle CanComponentLeave {
canLeave: () => boolean
}
@Injectable({
bereitgestelltIn: „root“
})
Die Exportklasse UnsaveGuard implementiert CanDeactivate<CanComponentLeave> {
canDeactivate(component: CanComponentLeave): boolean {
if (component.canLeave()) {
Rückkehr wahr
}
gibt false zurück
}
} {
Weg: "",
Komponente: HomeComponent,
canDeactivate: [UnsaveGuard]
} import { CanComponentLeave } aus „src/app/guards/unsave.guard“
Die Exportklasse HomeComponent implementiert CanComponentLeave {
myForm: FormGroup = new FormGroup({
Benutzername: new FormControl()
})
canLeave(): boolean {
if (this.myForm.dirty) {
if (window.confirm("Es gibt Daten, die nicht gespeichert wurden. Sind Sie sicher, dass Sie gehen möchten?")) {
Rückkehr wahr
} anders {
gibt false zurück
}
}
Rückkehr wahr
} 4. Mit Resolve
können Sie Daten abrufen, bevor Sie das Routing eingeben, und dann das Routing eingeben, nachdem die Datenerfassung abgeschlossen ist.
ng g resolver <name>
import { Injectable } from „@angular/core“
{ Resolve } aus „@angular/router“ importieren
Typ returnType = Promise<{ name: string }>
@Injectable({
bereitgestelltIn: „root“
})
Die Exportklasse ResolveGuard implementiert Resolve<returnType> {
lösen(): returnType {
return new Promise(function (resolve) {
setTimeout(() => {
lösen({ Name: „Zhang San“ })
}, 2000)
})
}
} {
Weg: "",
Komponente: HomeComponent,
lösen: {
Benutzer:ResolveGuard
}
} Exportklasse HomeComponent {
Konstruktor(private Route: ActivatedRoute) {}
ngOnInit(): void {
console.log(this.route.snapshot.data.user)
}
}