Angular 5에서 URL 쿼리 매개변수를 가져오는 방법

Angular 5에서 URL 쿼리 매개변수를 가져오는 방법

ActivatedRoute를 사용하여 쿼리 매개변수 가져오기

1. 컴포넌트 클래스에 ActivatedRoute를 주입합니다.

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

export class MyComponent {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 쿼리 매개변수를 가져옵니다.
    const params = this.route.snapshot.queryParams;

    // 특정 쿼리 매개변수 값을 가져옵니다.
    const id = params['id'];

    // 쿼리 매개변수가 없는 경우 기본값을 설정합니다.
    const name = params['name'] || '기본 이름';
  }
}

Location 서비스를 사용하여 쿼리 매개변수 가져오기

1. 컴포넌트 클래스에 Location 서비스를 주입합니다.

import { Location } from '@angular/common';

export class MyComponent {
  constructor(private location: Location) { }

  ngOnInit() {
    // URL에서 쿼리 문자열을 가져옵니다.
    const search = this.location.search;

    // 쿼리 문자열을 파싱하여 쿼리 매개변수 객체를 만듭니다.
    const params = new URLSearchParams(search);

    // 특정 쿼리 매개변수 값을 가져옵니다.
    const id = params.get('id');

    // 쿼리 매개변수가 없는 경우 기본값을 설정합니다.
    const name = params.get('name') || '기본 이름';
  }
}

추가 정보

참고:

• ActivatedRoute를 사용하는 방법은 컴포넌트가 라우팅된 경우에만 사용할 수 있습니다.
• Location 서비스를 사용하는 방법은 컴포넌트가 라우팅된 경우와 그렇지 않은 경우 모두 사용할 수 있습니다.

예시:

<a [routerLink]="['/my-route', { queryParams: { id: 1, name: 'John' } }]">
  링크
</a>

이 예시에서 MyComponent는 다음과 같이 쿼리 매개변수를 가져올 수 있습니다.

export class MyComponent {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    const params = this.route.snapshot.queryParams;
    const id = params['id'];
    const name = params['name'];
  }
}

예제 코드

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  id: number;
  name: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 쿼리 매개변수를 가져옵니다.
    const params = this.route.snapshot.queryParams;

    // 특정 쿼리 매개변수 값을 가져옵니다.
    this.id = params['id'];
    this.name = params['name'] || '기본 이름';
  }
}

<h1>{{ id }}</h1>
<h2>{{ name }}</h2>

사용 방법:

1. app.module.ts 파일에 MyComponent를 등록합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'my-route', component: MyComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 브라우저에서 http://localhost:4200/my-route?id=1&name=John 주소로 이동합니다.

결과:

<h1>1</h1>
<h2>John</h2>

• 이 예시는 ActivatedRoute를 사용하여 쿼리 매개변수를 가져오는 방법을 보여줍니다.
• Location 서비스를 사용하여 쿼리 매개변수를 가져오는 방법은 위의 설명을 참조하십시오.

대체 방법

import { Location } from '@angular/common';

export class MyComponent {
  constructor(private location: Location) { }

  ngOnInit() {
    // URL에서 쿼리 문자열을 가져옵니다.
    const search = this.location.search;

    // 쿼리 문자열을 파싱하여 쿼리 매개변수 객체를 만듭니다.
    const params = new URLSearchParams(search);

    // 특정 쿼리 매개변수 값을 가져옵니다.
    const id = params.get('id');

    // 쿼리 매개변수가 없는 경우 기본값을 설정합니다.
    const name = params.get('name') || '기본 이름';
  }
}

RxJS를 사용하여 쿼리 매개변수 가져오기

import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';

export class MyComponent {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 쿼리 매개변수를 Observable로 가져옵니다.
    const params$: Observable<any> = this.route.queryParams;

    // Observable을 구독하여 쿼리 매개변수 값을 가져옵니다.
    params$.subscribe(params => {
      const id = params['id'];
      const name = params['name'] || '기본 이름';
    });
  }
}

• 위의 방법들은 ActivatedRoute를 사용하는 방법보다 더 복잡합니다.
• ActivatedRoute를 사용하는 방법으로 쿼리 매개변수를 가져오는 것이 가장 일반적입니다.

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  id: number;
  name: string;

  constructor(private location: Location) {}

  ngOnInit() {
    // URL에서 쿼리 문자열을 가져옵니다.
    const search = this.location.search;

    // 쿼리 문자열을 파싱하여 쿼리 매개변수 객체를 만듭니다.
    const params = new URLSearchParams(search);

    // 특정 쿼리 매개변수 값을 가져옵니다.
    this.id = params.get('id');
    this.name = params.get('name') || '기본 이름';
  }
}

HTML:

<h1>{{ id }}</h1>
<h2>{{ name }}</h2>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<h1>1</h1>
<h2>John</h2>