경로 쿼리 매개 변수 가져오기

경로 쿼리 매개 변수 가져오기

rc1에서 rc4로 마이그레이션하려고 하는데 쿼리 문자열 매개 변수를 가져오는 데 문제가 있습니다.ActivatedRoute 개체는 항상 비어 있습니다.

hero.component.ts

import {Component, OnInit} from "@angular/core";
import {Control} from "@angular/common";
import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router';

@Component({
    template: '../partials/main.html',
    directives: [ROUTER_DIRECTIVES]
})

export class HeroComponent implements OnInit {

    constructor(private _activatedRoute: activatedRoute) {

    }

    ngOnInit() {
        this._activatedRoute.params.subscribe(params => {
            console.log(params);
        });
    }
}

메인.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, RequestOptions, Http} from '@angular/http';
import {AppRouterProviders} from './app.routes';

bootstrap(AppComponent, [
    AppRouterProviders,
    HTTP_PROVIDERS
]);

app.component.ts

import {Component, OnInit} from '@angular/core';
import {HeroComponent} from './hero.component';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from '@angular/router';


@Component({
    selector: 'my-app',
    templateUrl: '../partials/main.html',
    directives: [
        HeroComponent,
        ROUTER_DIRECTIVES
    ]
})

export class AppComponent {
}

부분적인/본문적인.

<a class="nav-link" [routerLink]="['/']" [queryParams]="{st: 'new'}">New</a>

app.s.ts.

import {provideRouter, RouterConfig}  from '@angular/router';
import {HeroComponent} from './hero.component';
import {ErrorComponent} from './error.component';

const routes: RouterConfig = [
    {path:'', component: HeroComponent},
    {path:'**', component: ErrorComponent}
];

export const AppRouterProviders = [
    provideRouter(routes)
];

'새로 만들기' 링크를 클릭하면 콘솔에서 빈 개체가 출력됩니다.

개체 {}

업데이트됨

덜커덕터

업데이트(2.0.0 최종)

(somepath/:someparam/someotherpath를 사용하여 구독할 수 있습니다._router.queryParams.subscribe(...):

export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _activatedRoute.queryParams.subscribe(
      params => console.log('queryParams', params['st']));

원래의

네가 원한다면queryParams경로 매개 변수 대신(somepath/:someparam/someotherpath를 사용하여 구독할 수 있습니다._router.routerState.queryParams.subscribe(...):

export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _router.routerState.queryParams.subscribe(
      params => console.log('queryParams', params['st']));

플런커 예제

저는 같은 문제로 오랫동안 고군분투하고 있었습니다.답변이 까다롭기 때문에 문서에는 다음과 같이 명시되어 있습니다.

ActivatedRoute: 경로 매개 변수, 정적 데이터, 해결 데이터, 글로벌 쿼리 매개 변수 및 글로벌 조각과 같은 경로 관련 정보를 포함하는 각 경로 구성 요소에 제공되는 서비스입니다.이것은 여기에 언급되어 있습니다.

트릭 답변은 '루트 구성 요소'입니다. 즉, 활성화된 경로는 라우팅된 구성 요소에서만 작동합니다.즉, 라우팅 테이블에 설명된 구성 요소만 해당됩니다.

> 난독화되는 공식문서를 여기서 읽고 있습니다.여기에는 '콘센트에 장착된 구성 요소와 연결된 경로'가 나와 있습니다.우리는 단지 콘센트가 무엇인지 추측할 수 있을 뿐입니다.

독립 실행형 app.module.ts에서 이 문제를 조사하기 위해 작은 조사 코드를 작성했습니다.

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

@Component({
  selector: 'comp1',
  template: `<h4>comp1 works</h4>`,
})
export class Comp1 { }

@Component({
  selector: 'comp2',
  template: `<h4>comp2 works</h4>`,
})
export class Comp2 { }

@Component({
  selector: 'fail',
  template: `<div>Wrong URL:{{url | json}}</div> <h4>Failure page works</h4>`,
})
export class Fail {
  private url: any;
  constructor(public activeRoute: ActivatedRoute) {
    this.url = activeRoute.snapshot.url
  };

}

@Component({
  selector: 'app-root',
  template: `<div>Base URL:{{url | json}}</div> <router-outlet></router-outlet>`,
})
export class App {
  private url: any;
  constructor(public activeRoute: ActivatedRoute) {
    this.url = activeRoute.snapshot.url
  };
}

const appRoutes: Routes = [
  { path: '1', component: Comp1 },
  { path: '2', component: Comp2 },
  { path: '**', component: Fail }
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
  declarations: [App, Comp2, Comp1, Fail],
  bootstrap: [App]
})
export class AppModule { }

---

다음 URI에 대해 모듈을 실행해 보십시오.

• http://localhost:4200/2
• http://localhost:4200/1
• http://localhost:4200/a/b/c

행운을 빌어요, 코드가 입증되기를 바랍니다.

코드 한 줄을 사용하여 매개 변수를 얻을 수도 있습니다.

constructor(
private router: Router,
private route: ActivatedRoute,
) { }


this.route.snapshot.paramMap.get('id');

각도 설명서를 확인합니다. 모두 여기에 있습니다. https://angular.io/docs/ts/latest/guide/router.html

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private service: HeroService) {}

    ngOnInit() {
      this.sub = this.route.params.subscribe(params => {
         let id = +params['id']; // (+) converts string 'id' to a number
         this.service.getHero(id).then(hero => this.hero = hero);
       });

언급URL : https://stackoverflow.com/questions/38488568/get-route-query-params