[Angular] ActivatedRoute 정리

ActivatedRoute의 메모입니다.Angular: 9.1.6

공통

소개하는 각 처리는 이 컴포넌트를 공통으로 이용합니다

test.component.ts

export class TestComponent implements OnInit {

  // ActivatedRouteサービスをDIします
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 各処理を記載
  }
}

paramMap

URL

http://localhost:4200/test/1

구현

app.routing.ts

const routes: Routes = [
  {path: 'test/:id', component: TestComponent},
];

test.component.ts

    this.route.paramMap.subscribe( params => {
      console.log(params);
      console.log(params.get('id'));
    });

결과

queryParams

쿼리 매개변수 검색

URL

http://localhost:4200/test?param1=foo&param2=hoge

구현

app.routing.ts

const routes: Routes = [
  {path: 'test', component: TestComponent},
];

test.component.ts

    this.route.queryParamMap.subscribe( params => {
        console.log(params);
        console.log(params.get('param1'));
        console.log(params.get('param2'));
     });

결과

fragment

※단편, 「#~」이후의 문자열

URL

http://localhost:4200/test#param1=foo&param2=hoge

구현

app.routing.ts

const routes: Routes = [
  {path: 'test', component: TestComponent},
];

test.component.ts

    this.route.fragment.subscribe( fragment => {
      console.log(fragment);
    });

결과

url

URL

http://localhost:4200/test/1

구현

app.routing.ts

const routes: Routes = [
  {path: 'test/:id', component: TestComponent},
];

test.component.ts

    this.route.url.subscribe( url => {
      console.log(url);
      console.log(url.join(' '));
    });

결과

데이터

URL

http://localhost:4200/test

구현

app.routing.ts

const routes: Routes = [
  {path: 'test', component: TestComponent, data: {testData: 'test'}},
];

test.component.ts

    this.route.data.subscribe( data => {
      console.log(data);
    });

결과

이상