parámetros de navegación Ruta pasaron
this.router.navigateByUrl('/user', { state: { orderId: 1234 } });
<a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a>
状态将保留在浏览器的hostory.state属性上
在跳转到的页面上
export class DyTwoComponent implements OnInit {
constructor(private router:Router) {
console.log(this.router.getCurrentNavigation().extras.state);
}
ngOnInit(): void {
console.log(history.state);
}
}
Tenga en cuenta que un pozo, cuando se utiliza
getCurrentNaviagation
cuando se necesita paraconstructor
ser llamado o no a la llamada, ongOnInit
tomar directamente lata
Captura de instantáneas
Desde nuestra
/ccc/1
navegación/ccc/123
necesaria para registrar los cambios en los datos actuales
export class DyTwoComponent implements OnInit {
constructor(private r:ActivatedRoute) {
r.url.subscribe((val)=>{
console.log(val);
})
}
}
Modificar la estrategia de navegación de navegación
Vue entiende que dentro de la programación de la navegación
Navegación relativa
{
path: 'two/:id',
component: DyTwoComponent,
children:[
{
path:'one',
component:DyOneComponent
},
{
path: 'ref',
component: RefsComponent,
}
]
}
假设当前路由是 /two
<div (click)="clickDown('one')">跳one子路由</div>
<div (click)="clickDown('ref')">跳ref子路由</div>
export class DyTwoComponent implements OnInit {
constructor(private router: Router, private r: ActivatedRoute) { }
ngOnInit(): void {}
clickDown(item: string) {
this.router.navigate(['./' + item], {relativeTo: this.r})
'../' //那么会跳转到 /one /ref 前面没有two
}
}
跳转到 two/one
跳转到 two/ref
但是当 two/:id 是动态的跳转会报错,暂时不知道怎么解决
parámetros del signo de interrogación
/results?page=1
this.router.navigate(['/results'], { queryParams: { page: 1 } });
Conjunto de URL fragmento de hash
/results#top
this.router.navigate(['/results'], { fragment: 'top' });
fusión parámetros
/results?page=1 to /view?page=1&page=2
this.router.navigate(['/view'], { queryParams: { page: 2 }, queryParamsHandling: "merge" });
tiempo de retención para la dirección URL de navegación siguiente fragmento
/results#top /view#top
this.router.navigate(['/view'], { preserveFragment: true });
La historia no registra la
this.router.navigate(['/view'], { skipLocationChange: true });
Vuelva a colocar la historia actual
this.router.navigate(['/view'], { replaceUrl: true });
enrutamiento de actualización
/pro/1 切换到/pro/1221
clickDown() {
this.router.navigateByUrl('/pro/1221');
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
};
}
我们发现生命周期会重新执行
Ruta
objeto de configuración define una única ruta
comodines
No importa dónde usted navegar a, para llevar a cabo el componente instanciada
[{ path: '**', component: WildcardComponent }]
redirección
redirectTo
diámetro volar
Vacío camino que hereda los parámetros y datos de los padres
/ Equipo / 12 son ejemplos de
AllUsers
componentes[{ path: 'team/:id', component: Team, children: [{ path: '', component: AllUsers }, { path: 'user/:name', component: User }] }]
estrategia coincidente
前缀匹配
/team/12/user /team/:id 匹配
{
path: '',
pathMatch: 'prefix', //default
redirectTo: 'main'
}
pathMatch: 'full', 完整匹配
{ path: '', redirectTo: 'list', pathMatch: 'full' },
guardia de enrutamiento
Para gatillo:
carga canLoad
canActivate en el (importante)
canActivateChild entrar en el sub-enrutamiento
licencia canDeactivate (importante)
Puedo lograr sólo brevemente la siguiente
La creación de un servicio de
import {Injectable} from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
CanDeactivate,
Router,
RouterStateSnapshot
} from "@angular/router";
import {DyOneComponent} from "./dy-one/dy-one.component";
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate, CanDeactivate<DyOneComponent> {
constructor(private router: Router) {
}
// 进入
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const url: string = state.url;
console.log(url);
return true;
}
// 离开
canDeactivate(component:DyOneComponent,currentRoute:ActivatedRouteSnapshot,currentState:RouterStateSnapshot) {
return window.confirm('是否离开这个模块')
}
}
DyOneComponent 是你离开这个页面所在的组件
enrutamiento
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuardService],// 进入
canDeactivate:[AuthGuardService] // 离开
}
Ya sea que necesite para recuperarse antes de rodar ExtraOptions de posición
@NgModule({
imports: [RouterModule.forRoot(routes,{ scrollPositionRestoration: 'enabled',})],
exports: [RouterModule]
})
desplazamiento personalizadas a través de los registros
constructor(private router: Router, private viewportScroller: ViewportScroller) {
this.router.events.pipe(
filter((e: Scroll) => e instanceof Scroll)
).subscribe(
e => {
if (e.position) {
// 后退
viewportScroller.scrollToPosition(e.position);
} else if (e.anchor) {
// 哈希
viewportScroller.scrollToAnchor(e.anchor);
} else {
// forward navigation
viewportScroller.scrollToPosition([0, 0]);
}
}
)
}
resolver
determinación realizar un encaminamiento asegura la adquisición de datos después del salto, evitando demoras de datos de componente vacía produce debido a un caso
También se puede utilizar para resolver ruta de intercepción
Siempre dice que hay un problema, siempre y cuando no hay forma de una redacción no es muy estricta
路由
{
path: 'two/:id',
component: TwoComponent,
resolve: {
detail: BlockService // 这个是拦截的路由
}
},
服务
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
@Injectable()
export class BlockService implements Resolve<any> {
constructor(private router: Router) {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
let ids = route.paramMap.get('id');
return new Observable(subscriber => {
subscriber.next(11)
}).pipe(
map(res => {
if (res == ids) { //成功
return res
} else {// 失败
this.router.navigate(['/three']);
return false
}
})
).subscribe(val => {
return val
})
}
}
成功后才会展示那个组件
Recuerde que pensar en darse de baja, Dime que no tenía que cancelar su suscripción en línea, también es necesario para explorar el punto específico