Angular IO의 루트 구성 요소 쿼리 매개 변수

Question

API에서 데이터를 가져 와서 데이터를 표시하는 아주 간단한 Angular 4+ 응용 프로그램이 있습니다. 루트 구성 요소를 사용하여 가능해야한다고 생각합니다 : {path: 'main', component: MainComponent} 및 QueryParams는 ?id=1입니다.

쿼리 매개 변수를 가져올 수 있지만 어떤 이유로 내 라우터가 이미 존재하는 route + params 부분 다음에 route + params 부분을 반복합니다. 예를 들어 내 로컬 주소가 localhost:4200/main?id=1에서 localhost:4200/main?id=1/main?id=1으로 변합니다.

ActivatedRoute는 URL에서 정확한 검색어 매개 변수를 선택하지만 URL을 가능한 한 삭제 된 상태로 유지하려고합니다. 이 중복을 어떻게 방지합니까? index.html의 라우팅 요구 사항에 따라 <base href='/'>을 설정했습니다.

모듈 :

@NgModule({ 
    imports: [ 
    BrowserModule, 
    RouterModule, 
    RouterModule.forRoot(
     [ 
     { path: 'main', component: MainComponent}, 
     ]), 
    CommonModule, 
    HttpModule, 
    FormsModule, 
    NgbModule.forRoot() 
    ], 
    declarations: [MainComponent], 
    providers: [ 
    {provide: APP_BASE_HREF, useValue: window.document.location.href}, 
    DataService, 
    WindowService, 
    HttpUtil 
    ], 
    bootstrap: [MainComponent] 
}) 
export class MainModule{} 

구성 요소 :

@Component({ 
    selector: 'main-component', 
    templateUrl: './main.component.html', 
    styleUrls: ['./main.component.css'] 
}) 

export class MainComponent implements OnInit { 

    constructor(private dataService: DataService, 
       private activatedRoute: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.activatedRoute.queryParams.subscribe((params: Params) => { 
     if (!(Object.keys(params).length === 0 && params.constructor === Object)) { 
     console.log(params); 
     } 
    }); 
    } 
} 

Answer 1

이것은 당신이 APP_BASE_HREF

{provide: APP_BASE_HREF, useValue: window.document.location.href} 

당신은 main?id=1 window.document.location.href 사용하는 응용 프로그램을 말하고있다 의해 발생 귀하의 기본 href로. Angular는 자신의 경로를 basehref의 끝에 추가합니다. 이것은 당신이 여기 중복

localhost:4200/main?id=1(< APP_BASE_HREF)/main?id=1(< ROUTE) 

을 받고 APP_BASE_HREF (https://angular.io/api/common/PathLocationStrategy#description)