각도 4의 URL에서 매개 변수를 가져오는 방법은 무엇입니까?

각도 4의 URL에서 매개 변수를 가져오는 방법은 무엇입니까?

저는 URL에서 시작 날짜를 얻으려고 합니다.URL은 다음과 같습니다.http://sitename/booking?startdate=28-08-2017

내 코드는 다음과 같습니다.

a.ap.s.

    import {...};

    @NgModule({
      declarations: [
        AppComponent, ModalComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{
                path: '',
                component: AppComponent
            },
        ]),    
      ], 
      providers: [ContactService, AddonService, MainService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

aap.component.ts

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

constructor(private activatedRoute: ActivatedRoute) {
  // subscribe to router event
  this.activatedRoute.queryParams.subscribe((params: Params) => {
    console.log(params);
  });

}

하지만 아래의 오류를 주고 있습니다.

처리되지 않은 약속 거부:기본 href 집합이 없습니다.APP_BASE_HREF 토큰에 대한 값을 제공하거나 문서에 기본 요소를 추가하십시오.영역: ; 작업: 약속.값: 오류: 기본 href가 설정되지 않았습니다.APP_BASE_HREF 토큰에 대한 값을 제공하거나 문서에 기본 요소를 추가하십시오.

Angular는 기본 href를 어떻게 압니까?

경로

export const MyRoutes: Routes = [
    { path: '/items/:id', component: MyComponent }
]

요소

import { ActivatedRoute } from '@angular/router';
public id: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
   this.id = this.route.snapshot.paramMap.get('id');
}

갱신하다

저는 이 게시물에서 Dimitry Grinko의 답변이 이것보다 더 낫다고 생각합니다.

구답

이렇게 하면 URL에서 매개 변수를 검색하는 방법이 수행됩니다.

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.queryParams.subscribe(params => {
        let date = params['startdate'];
        console.log(date); // Print the parameter to the console. 
    });
}

이제 로컬 변수 날짜에 URL의 시작 날짜 매개 변수가 포함되어야 합니다.라우터 및 매개 변수 모듈은 제거할 수 있습니다(클래스의 다른 위치에서 사용되지 않는 경우).

그들은 각을 두 종류의 URL로 나누었습니다.

1. URL 패턴/heroes/:limit예:/heroes/20

   • 다음을 사용하여 원시 값을 얻을 수 있습니다.route.snapshot.paramMap.get.
   • 구독 대상route.paramMap파라마를 받다

2. URL 패턴/heroes예:/heroes?limit=20

   • 다음을 사용하여 원시 값을 얻을 수 있습니다.route.snapshot.queryParamMap

참조:Angular 파라미터에 대해 알아야 할 모든 사항

constructor(private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
    this.activatedRoute.params.subscribe(paramsId => {
        this.id = paramsId.id;
        console.log(this.id);
    });
  
 }

app.module.ts

import { Routes,RouterModule } from '@angular/router';

const routes: Routes = [
    { 
       path: '', 
       component: HomeComponent 
    }
    { 
       path: '/users/:id/:name', 
       component: UsersComponent 
    }
]

@NgModule({
   ....
   imports : [
       .......,
       RouterModule.appRoot(routes)
   ]
   ....
})

구성요소 페이지

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

export class UserComponent implements OnInit {
    user : {id: number, name: string};

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        // If you get param one time in page use below code...
        this.user = {
            id : this.route.snapshot.params['id'],
            name : this.route.snapshot.params['name']   
        };
        // Dynamically change params use below code...
        this.route.params.subscribe((param : Params) => {
            this.user.id = param['id'];
            this.user.name = param['name'];
        });
    }
}

승인된 답변은 관찰 가능한 변수를 사용하여 매개 변수를 검색합니다. 매개 변수는 구성 요소 수명 주기 동안 변경됩니다.

매개 변수가 변경되지 않으면 라우터 URL의 스냅샷에 있는 매개 변수 개체를 사용할 수 있습니다.

snapshot.params개체의 URL에 있는 모든 매개 변수를 반환합니다.

constructor(private route: ActivateRoute){}

ngOnInit() {
   const allParams = this.route.snapshot.params // allParams is an object
   const param1 = allParams.param1 // retrieve the parameter "param1"
}

URL 문자열에서 매개 변수를 확인하거나:param사용자의 routeConfig에서

downstream.component.ts

...
import {Router,ActivatedRoute} from '@angular/router';
...    
export class DownstreamComponent  {
    constructor(
    private route: ActivatedRoute,
    private router: Router
) {
    if(this.route.snapshot.queryParams) 
      console.log(this.route.snapshot.params); // e.g. :param1 in routeConfig
    if(this.route.snapshot.queryParamMap.get('param1'))
      console.log(this.route.snapshot.queryParamMap.get('param1')); // e.g. in URI ?param1=blah
}

}

사용해 볼 수 있습니다.

this.activatedRoute.paramMap.subscribe(x => {
    let id = x.get('id');
    console.log(id);  
});

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

constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.paramMap
    .subscribe( params => {
    let id = +params.get('id');
    console.log('id' + id);
    console.log(params);


id12
ParamsAsMap {params: {…}}
keys: Array(1)
0: "id"
length: 1
__proto__: Array(0)
params:
id: "12"
__proto__: Object
__proto__: Object
        }
        )

      }

사용하다paramMap

매개 변수 이름과 해당 값을 제공합니다.

//http://localhost:4200/categories/1
//{ path: 'categories/:category', component: CategoryComponent },

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

constructor(private route: ActivatedRoute) { }

ngOnInit() {

  this.route.paramMap.subscribe(params => {
        console.log(params)
  })
}

이거 드셔보세요.URL 매개 변수가 http://127.0.0.1:8000/profile/?startdate=12-02-http와 같은 경우

const date = this.ActivatedRoute.snapshot.queryParamMap.get('startdate'); 
console.warn(date)

이것이 누군가에게 도움이 되기를 바랍니다."id"가 아닌 것으로 이 작업을 수행하는 동안 정의되지 않은 경우 올바른 매개 변수를 전달하고 있는지 확인합니다.

parent-component.ts의 경로가 다음과 같은 경우:

 onSelect(elem) {
    this.router.navigateByUrl(`/element/${elem.type}`);
  }

그리고 어린이 구성요소.ts에서.

  type: string;
  elem: ElemModel;

  constructor(
    private elemService: ElemService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.params.subscribe((data) => {

      console.log(data);  // 'data' will give u an object with the type inside, check the 
      name of that type inside console of devTool, as u will put that name inside 
      data[HERE] down below.

      this.type = data["elem-type-maybe"]; // Don't do this.type = data["type"], do 
      data[NAME] as said above.

      this.elem = this.elemService.getElem(this.type); // getElem is method in service 
      which returns that specific type.
    });

지정된 예약 URL 경로 매개 변수에서 시작 날짜를 확인하려면 다음을 시도하십시오.

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

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

  constructor(private activeRoute: ActivatedRoute) { 
    this.activeRoute.queryParams.subscribe((qp) => {
      console.log('Get Router Params:', this.activeRoute.snapshot.queryParams.startdate);
    });
  }

  ngOnInit(): void {
  }

}

경로 URL 관련 자세한 정보는 여기를 참조하십시오.

언급URL : https://stackoverflow.com/questions/45997369/how-to-get-param-from-url-in-angular-4