이 기사에서는 NavigationByUrl을 비교하고 Angular 라우팅을 탐색하여 차이점과 공통점을 살펴보겠습니다. AAngular NavigateByurl VS 탐색 라우팅 경로 점프
import { Router, ActivatedRoute } from '@angular/router'; export class xxx{ constructor(private router: Router, private route: ActivatedRoute){} }[관련 튜토리얼 권장 사항: Angular 튜토리얼
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
받는 첫 번째 매개 변수가 다르고 두 번째 매개 변수는 동일합니다.
1.2 Navigate()this.router.navigateByUrl('/home');
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
그러면 구문 분석된 경로는 localhost:4200/home/demo
입니다.
relativeTo
매개변수를 전달하여 들어오는 경로를 기준으로 이동할 수 있습니다. 예를 들어 현재 localhost:4200/home
에 있는 경우 점프 후의 주소는 localhost:4200/home/demo
입니다. 그러나 'demo'
를 '/demo'
로 쓰면 들어오는 경로가 작동하지 않고 루트 경로를 탐색에 사용하게 됩니다. 전달되지 않으면 기본적으로 루트 경로(localhost:4200)가 탐색에 사용됩니다. 2. 공통점:
this.router.navigate(['home', 'demo'])
localhost:4200/home/demo
。
可以相对当前路由进行导航
传入一个relativeTo
参数,即可相对传入的路由进行跳转。如当前在localhost:4200/home
,
this.router.navigate(['demo'], {relativeTo: this.route})
跳转后的地址为localhost:4200/home/demo
。
但如果'demo'
写成'/demo'
传入的路由就不起作用了,会以根路由进行导航。如果不传入也是默认以根路由(localhost:4200)进行导航。
interface NavigationExtras { relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean state?: {...} }
以 navigate 举例
此种传参方式会把参数拼接在url上,如localhost:4200/demo?id=1
A组件传递参数
this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})
B组件接收参数
/user/:id
方式传递过来用 activatedRoute.params
import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.params.subscribe((param) => { console.log('组件里面的param', param);// {id :1} }); }
/user?id=1
方式传递用activatedRoute.queryParams
localhost:4200/demo?id=1과 같이 URL에 매개변수를 연결합니다. code><p><strong></strong>A 컴포넌트 전달 매개변수</p>
<p><pre class="brush:js;toolbar:false;">import { ActivatedRoute } from &#39;@angular/router&#39;;
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe((param) => {
console.log(&#39;组件里面的queryParams&#39;, param); // {id :1}
});
}</pre><strong></strong>B 컴포넌트가 매개변수 수신</p>
<h3><ul><li>
<code>/user/:id
를 통해 전달된 경우 activatedRoute.params
이 메소드는 브라우저 기록에 존재하는 데이터를 전송하고 상태는 객체여야 하며 getCurrentNavigation을 사용하여 하위 경로에서 이를 검색합니다. 🎜import { Component, Input } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; @Component({ selector: 'a-component', template: ` <button (click)="test()">Test</button> `, }) export class AComponent { constructor(private router: Router){} test(){ const navigationExtras: NavigationExtras = {state: {id: 1}}; this.router.navigate(['b'], navigationExtras); } }
/user?id=1
를 통해 전달된 경우activatedRoute.queryParams
를 사용하세요.import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'b-component' }) export class BComponent { constructor(private router: Router) { const navigation = this.router.getCurrentNavigation(); const state = navigation.extras.state as {id: number}; // state.id 就是传过来的数据 } }상태를 통해 매개변수 전달
this.router.navigate(['demo']).then(nav => { console.log(nav); // true: 跳转成功, false 跳转失败 }, err => { console.log(err) // 发生无措 });🎜🎜B 구성 요소는 매개 변수를 받습니다🎜🎜rrreee🎜2.2에는 모두 콜백이 있습니다🎜rrreee🎜🎜Github에 대한 추가 사용 업데이트:🎜🎜https://github.com/deepthan/blog-angular 🎜 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜
위 내용은 NaviUrl과 Angular 라우팅 탐색 간의 차이점과 공통점에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!