No Angular, o roteamento以模块为单位, e cada módulo pode ter seu próprio roteamento. [Recomendação de tutorial relacionado: "tutorial angular"]
1. Crie componentes de página, componentes de layout e componentes de navegação para uso de roteamento
Crie o componente de página inicial ng gc pages/home
Crie o componente de página sobre nós ng gc pages/about
Crie o componente de layout ng gc pages/layout
Crie o componente de navegação ng gc pages/navigation
2. Crie regras de roteamento
// app.module. ts
importar {Rotas} de "@angular/router"
rotas const: Rotas = [
{
caminho: "casa",
componente:HomeComponent
},
{
caminho: "sobre",
componente: AboutComponent
}
] 3. Apresente o módulo de roteamento e inicie
// app.module.ts
importar { RouterModule, Rotas } de "@angular/router"
@NgModule({
importações: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {} 4. Adicione路由插座
<!-- O soquete de roteamento, ou seja, o componente de roteamento correspondente ao componente de espaço reservado será exibido aqui --> <router-outlet></router-outlet>5. Defina o link
<a routerLink="/home">Homepage</a>
no componente de navegação
<a routerLink="/about">Sobre nós</a>
1. Redirecionar
rotas const: Rotas = [
{
caminho: "casa",
componente:HomeComponent
},
{
caminho: "sobre",
componente: AboutComponent
},
{
caminho: "",
// Redireciona redireccionamento para: "home",
//Correspondência exata pathMatch: "full"
}
] 2. Rotas const
de página 404
: Rotas = [
{
caminho: "casa",
componente:HomeComponent
},
{
caminho: "sobre",
componente: AboutComponent
},
{
caminho: "**",
componente: NotFoundComponent
}
] 1. Parâmetros de consulta
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">Sobre nós</a> importar { ActivatedRoute } de "@angular/router"
classe de exportação AboutComponent implementa OnInit {
construtor (rota privada: ActivatedRoute) {}
ngOnInit(): void {
this.route.queryParamMap.subscribe(query => {
query.get("nome")
})
}
} 2.
Rotas const de parâmetro dinâmico: Rotas = [
{
caminho: "casa",
componente:HomeComponent
},
{
caminho: "sobre/:nome",
componente: AboutComponent
}
] <a [routerLink]="['/about', 'zhangsan']">Sobre nós</a>
importar { ActivatedRoute } de "@angular/router"
classe de exportação AboutComponent implementa OnInit {
construtor (rota privada: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
params.get("nome")
})
}
} O aninhamento de rotas refere-se a como定义子级路由.
rotas const: Rotas = [
{
caminho: "sobre",
componente: AboutComponent,
crianças: [
{
caminho: "apresentar",
componente:IntroduceComponent
},
{
caminho: "história",
componente: HistoryComponent
}
]
}
] <!-- about.component.html -->
<layout do aplicativo>
<p>sobre obras!</p>
<a routerLink="/about/introduce">Perfil da empresa</a>
<a routerLink="/about/history">Histórico de desenvolvimento</a>
<div>
<router-outlet></router-outlet>
</div>
</app-layout> Nomeie o soquete
Exponha os componentes de roteamento secundários em diferentes saídas de roteamento.
{
caminho: "sobre",
componente: AboutComponent,
crianças: [
{
caminho: "apresentar",
componente:IntroduceComponent,
saída: "esquerda"
},
{
caminho: "história",
componente: HistoryComponent,
saída: "certo"
}
]
} <!-- about.component.html --> <layout do aplicativo> <p>sobre obras!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<a
[routerLink]="[
'/sobre',
{
pontos de venda: {
esquerda: ['apresentar'],
certo: ['história']
}
}
]"
>Sobre nós</a> <!-- app.component.html --> <button (click)="jump()">Ir para o histórico de desenvolvimento</button>
// app.component.ts
importar {Roteador} de "@angular/roteador"
exportar classe HomeComponent {
construtor (roteador privado: roteador) {}
pular() {
this.router.navigate(["/sobre/história"], {
queryParams: {
nome: "Kitty"
}
})
}
} Abstraia a configuração de roteamento no módulo raiz em um módulo de roteamento separado, chamado根路由模块e, em seguida, introduza o módulo de roteamento raiz no módulo raiz.
importar {NgModule} de "@angular/core"
importar {HomeComponent} de "./pages/home/home.component"
importar {NotFoundComponent} de "./pages/not-found/not-found.component"
rotas const: Rotas = [
{
caminho: "",
componente:HomeComponent
},
{
caminho: "**",
componente: NotFoundComponent
}
]
@NgModule({
declarações: [],
importações: [RouterModule.forRoot(routes, { useHash: true })],
// Exporta o módulo de função de roteamento Angular, porque o componente de soquete de roteamento fornecido no módulo RouterModule é usado no componente raiz das exportações do módulo raiz: [RouterModule]
})
exportar classe AppRoutingModule {} importar { BrowserModule } de "@angular/platform-browser"
importar {NgModule} de "@angular/core"
importar {AppComponent} de "./app.component"
importar {AppRoutingModule} de "./app-routing.module"
importar {HomeComponent} de "./pages/home/home.component"
importar {NotFoundComponent} de "./pages/not-found/not-found.component"
@NgModule({
declarações: [AppComponent, HomeComponent, NotFoundComponent],
importações: [BrowserModule, AppRoutingModule],
provedores: [],
inicialização: [AppComponent]
})
exportar classe AppModule {} O carregamento lento de rotas é baseado em模块.
1. Crie o módulo do usuário ng gm user --routing=true e crie o módulo de roteamento deste módulo juntos
2. Crie o componente da página de login ng gc user/pages/login
3. Crie o componente da página de registro ng gc user/pages/register
4. Configuração Regras de roteamento para módulos de usuário
importam {NgModule} de "@angular/core"
importar {Rotas, RouterModule} de "@angular/router"
importar {LoginComponent} de "./pages/login/login.component"
importar { RegisterComponent } de "./pages/register/register.component"
rotas const: Rotas = [
{
caminho: "login",
componente: LoginComponent
},
{
caminho: "registrar",
componente: RegisterComponent
}
]
@NgModule({
importações: [RouterModule.forChild(rotas)],
exportações: [RouterModule]
})
export class UserRoutingModule {} 5. Associe o módulo de roteamento do usuário ao módulo de roteamento principal
// app-routing.module.ts
rotas const: Rotas = [
{
caminho: "usuário",
loadChildren: () => importar("./user/user.module").then(m => m.UserModule)
}
] 6. Adicione o link de acesso <a routerLink="/user/login">Login</a>
no componente de navegação
<a routerLink="/user/register">Registrar</a>
O guarda de rota informa à rota se a navegação para a rota solicitada é permitida.
Os métodos de proteção de rota podem retornar boolean ou Observable <boolean> ou Promise <boolean> , que resolvem para um valor booleano em algum momento no futuro.
1. CanActivate
verifica是否可以访问某一个路由.
CanActivate为接口e a classe de proteção de rota deve implementar essa interface. Essa interface estipula que a classe precisa ter um método canActivate, que determina se deve permitir acesso à rota de destino.
Uma rota pode aplicar多个守卫. Se todos os métodos de guarda forem permitidos, a rota poderá ser acessada. Se um método de guarda não for permitido, a rota não poderá ser acessada.
Crie protetores de rota: ng g guard guards/auth
import { Injetável } de "@angular/core"
importar {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} de "@angular/router"
importar {Observável} de "rxjs"
@Injetável({
fornecidoIn: "root"
})
classe de exportação AuthGuard implementa CanActivate {
construtor (roteador privado: roteador) {}
canActivate(): booleano |
// Usado para implementar o retorno de salto this.router.createUrlTree(["/user/login"])
// Desativa o acesso à rota alvo return false
//Permite acesso à rota alvo return true
}
} {
caminho: "sobre",
componente: AboutComponent,
canActivate: [AuthGuard]
} 2. CanActivateChild
verifica se o usuário pode acessar uma determinada subrota.
Crie um guarda de rota: ng g guard guards/admin Nota: Para selecionar CanActivateChild, mova a seta para esta opção e toque em espaço para confirmar a seleção.
importar {Injetável} de "@angular/core"
importar {CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} de "@angular/router"
importar {Observável} de "rxjs"
@Injetável({
fornecidoIn: "root"
})
classe de exportação AdminGuard implementa CanActivateChild {
canActivateChild(): booleano |
retornar verdadeiro
}
} {
caminho: "sobre",
componente: AboutComponent,
canActivateChild: [AdminGuard],
crianças: [
{
caminho: "apresentar",
componente:IntroduceComponent
}
]
} 3. CanDeactivate
verifica se o usuário pode sair da rota.
Por exemplo, se o conteúdo inserido pelo usuário no formulário não for salvo e o usuário quiser sair da rota, o guarda poderá ser chamado para avisar o usuário.
importar {Injetável} de "@angular/core"
importar {
PodeDesativar,
AtivadoRotaInstantâneo,
RouterStateSnapshot,
UrlTree
} de "@angular/roteador"
importar {Observável} de "rxjs"
interface de exportação CanComponentLeave {
canLeave: () => booleano
}
@Injetável({
fornecidoIn: "root"
})
classe de exportação UnsaveGuard implementa CanDeactivate<CanComponentLeave> {
canDeactivate(componente: CanComponentLeave): boolean {
if (component.canLeave()) {
retornar verdadeiro
}
retornar falso
}
} {
caminho: "",
componente: HomeComponent,
canDeactivate: [UnsaveGuard]
} importar { CanComponentLeave } de "src/app/guards/unsave.guard"
classe de exportação HomeComponent implementa CanComponentLeave {
meuFormulário: FormGroup = new FormGroup({
nome de usuário: novo FormControl()
})
canLeave(): boolean {
if (este.meuFormulário.dirty) {
if (window.confirm("Há dados que não foram salvos, tem certeza que deseja sair?")) {
retornar verdadeiro
} outro {
retornar falso
}
}
retornar verdadeiro
} 4. O Resolve
permite obter dados antes de inserir o roteamento e, em seguida, inserir o roteamento após a conclusão da aquisição de dados.
ng g resolver <name>
importar {Injetável} de "@angular/core"
importar {Resolver} de "@angular/router"
tipo returnType = Promessa<{ nome: string }>
@Injetável({
fornecidoIn: "root"
})
classe de exportação ResolveGuard implementa Resolve<returnType> {
resolver(): returnType {
retornar nova Promessa(função (resolver) {
setTimeout(() => {
resolver({ nome: "Zhang San" })
}, 2000)
})
}
} {
caminho: "",
componente: HomeComponent,
resolver: {
usuário:ResolveGuard
}
} exportar classe HomeComponent {
construtor (rota privada: ActivatedRoute) {}
ngOnInit(): void {
console.log(this.route.snapshot.data.user)
}
}