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

青灯夜游

풀어 주다： 2021-11-12 11:07:29

앞으로

3037명이 탐색했습니다.

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

import { Router, ActivatedRoute } from &#39;@angular/router&#39;;

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><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><strong></strong>B 컴포넌트가 매개변수 수신</p><h3><ul><li><code>/user/:id

를 통해 전달된 경우

activatedRoute.params<를 사용하세요. /code></h3><blockquote><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { Component, Input } from &amp;#39;@angular/core&amp;#39;;
import { Router, NavigationExtras } from &amp;#39;@angular/router&amp;#39;;

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

  test(){
    const navigationExtras: NavigationExtras = {state: {id: 1}};
    this.router.navigate([&amp;#39;b&amp;#39;], navigationExtras);
  }
}</pre><div class="contentsignin">로그인 후 복사</div></div> <ul><li><code>/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!