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

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

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

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}

[관련 튜토리얼 권장 사항:

Angular 튜토리얼

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

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'])

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

localhost:4200/home/demo。

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

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

this.router.navigate(['demo'], {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(['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

내비게이션을 example

queryParams를 통해 매개변수 전달

이 매개변수 전달 방법은 localhost:4200/demo?id=1과 같이 URL에 매개변수를 연결합니다. code><p><strong></strong>A 컴포넌트 전달 매개변수</p> <p><pre class='brush:php;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 '@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([&#39;b&#39;], 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 就是传过来的数据
    }
  }

  상태를 통해 매개변수 전달

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

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

🎜

 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!