1

그래서 두 개의 구성 요소 인 HomePageComponent와 StudentsViewComponent가 있습니다. HomePageComponent에서 I는 입력 된 태그가 :angular2를 사용하여 입력 값을 다른 경로로 전달하는 방법은 무엇입니까?

<input type="text" #careerObj class="modules" placeholder="Career Objective (software engineer)"> 
 
<button class="submit" routerLinkActive="active" [routerLink]="['/students', careerObj.value ]">Search</button>

및 I는 PARAMS를 사용 studentsViewComponent이 입력 값을 전달할.

올바른 경로로 리디렉션되지만 매개 변수는 비어 있습니다. 값은 항상 비어 있으며, 왜 확실하지 않습니다.

여기 내 경로입니다 :

{ 
 
    path: 'students/:searchQuery', 
 
    component: StudentsViewComponent 
 
    },

ngOnInit() { 
 
    this.activatedRoute.params.subscribe((params: Params) => { 
 
    console.log(params); 
 
    }); 
 
}

PARAM이 비어있는 이유는 확실하지 않다.

난 당신이 링크 지시어는 아마도 방법 routerlink 하나를 바인딩 공식 모델을 사용하여 라우터에 값을 전달 요소 참조를 사용하는 GitHub의 두 번째 일에 마지막으로 본대로 모든 routerlink 지침의

+0

하여 제공하는 코드 예제 아무 문제가 없습니다. 나는 당신의 예제를 재현했고 작동한다. Select (val : string) {this.router.navigate ([ '/ ad /'+ val]);를 사용하여 구성 요소에서 경로를 변경하려고한다. }'문제를 찾으려면 – Brivvirs

+0

리디렉션 후 URL에 쿼리가 표시됩니까? –

+0

리디렉션 할 때 오류는 없지만 쿼리는 비어 있습니다. 예 : "" "@BabarBilal – DingDong

답변

2

먼저 버튼 유형과 문제가 도와주세요 그 (것)들의 문제점을 일으키는 원인이되고있다. ,

<input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective (software engineer)"> 
<button class="submit" routerLinkActive="active" [routerLink]="['/students', route]">Search</button> 

또는

<input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective (software engineer)"> 
<button class="submit" (click)="navigate()">Search</button> 

을이 시도하고이 기능을 사용하면 라우터를 주입하는 것을 잊지 말아 구성 요소

navigate(){ 
this.router.navigate(["students", this.route]); 
} 

입니다

+0

감사합니다. 당신 말이 맞았습니다. [(ngModel)]이 트릭을했습니다! – DingDong