>  기사  >  웹 프론트엔드  >  NaviUrl과 Angular 라우팅 탐색 간의 차이점과 공통점에 대한 간략한 분석

NaviUrl과 Angular 라우팅 탐색 간의 차이점과 공통점에 대한 간략한 분석

青灯夜游
青灯夜游앞으로
2021-11-12 11:07:292952검색

이 기사에서는 NavigationByUrl을 비교하고 Angular 라우팅을 탐색하여 차이점과 공통점을 살펴보겠습니다. AAngular NavigateByurl VS 탐색 라우팅 경로 점프

import { Router, ActivatedRoute } from '@angular/router';

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute){} 
}
NaviUrl과 Angular 라우팅 탐색 간의 차이점과 공통점에 대한 간략한 분석 [관련 튜토리얼 권장 사항:

Angular 튜토리얼

] 1 ==절대 경로== 문자열이어야 합니다.

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

받는 첫 번째 매개 변수가 다르고 두 번째 매개 변수는 동일합니다.

1.2 Navigate()

 this.router.navigateByUrl(&#39;/home&#39;);

첫 번째 매개변수는 배열입니다

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([&#39;home&#39;, &#39;demo&#39;])

2.1 매개변수 전달 방법은 동일합니다

localhost:4200/home/demo

可以相对当前路由进行导航

传入一个relativeTo参数,即可相对传入的路由进行跳转。如当前在localhost:4200/home,

this.router.navigate([&#39;demo&#39;], {relativeTo: this.route})

跳转后的地址为localhost:4200/home/demo

但如果'demo'写成'/demo'传入的路由就不起作用了,会以根路由进行导航。如果不传入也是默认以根路由(localhost:4200)进行导航。

2. 共同点:

interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

2.1 传递参数方式一样

以 navigate 举例

通过queryParams传参

此种传参方式会把参数拼接在url上,如localhost:4200/demo?id=1

A组件传递参数

this.router.navigate([&#39;demo&#39;], {queryParams: {id: 1} , relativeTo: this.route})

B组件接收参数

  • 若是通过/user/:id方式传递过来用 activatedRoute.params
import { ActivatedRoute } from &#39;@angular/router&#39;;

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((param) => {
      console.log(&#39;组件里面的param&#39;, param);// {id :1}
    });
}
  • 若是通过/user?id=1方式传递用activatedRoute.queryParams
내비게이션을 example

queryParams를 통해 매개변수 전달

이 매개변수 전달 방법은 localhost:4200/demo?id=1과 같이 URL에 매개변수를 연결합니다. code><p><strong></strong>A 컴포넌트 전달 매개변수</p> <p><pre class="brush:js;toolbar:false;">import { ActivatedRoute } from &amp;#39;@angular/router&amp;#39;; constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.queryParams.subscribe((param) =&gt; { console.log(&amp;#39;组件里面的queryParams&amp;#39;, param); // {id :1} }); }</pre><strong></strong>B 컴포넌트가 매개변수 수신</p> <h3><ul><li> <code>/user/:id를 통해 전달된 경우 activatedRoute.params
import { Component, Input } from &#39;@angular/core&#39;;
import { Router, NavigationExtras } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;a-component&#39;,
  template: `
    <button (click)="test()">Test</button>
  `,
})
export class AComponent  {
  constructor(private router: Router){}

  test(){
    const navigationExtras: NavigationExtras = {state: {id: 1}};
    this.router.navigate([&#39;b&#39;], navigationExtras);
  }
}
  • /user?id=1를 통해 전달된 경우 activatedRoute.queryParams를 사용하세요.

    import { Component } from &#39;@angular/core&#39;;
    import { Router } from &#39;@angular/router&#39;;
    
    @Component({
      selector: &#39;b-component&#39;
    })
    export class BComponent {
      constructor(private router: Router) { 
        const navigation = this.router.getCurrentNavigation();
        const state = navigation.extras.state as {id: number};
        // state.id 就是传过来的数据
      }
    }

    상태를 통해 매개변수 전달

이 메소드는 브라우저 기록에 존재하는 데이터를 전송하고 상태는 객체여야 하며 getCurrentNavigation을 사용하여 하위 경로에서 이를 검색합니다.

A 구성 요소는 매개 변수를 전달합니다

🎜
 this.router.navigate([&#39;demo&#39;]).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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제