2017-02-10 1 views
0

두 개의 구성 요소가 있는데 하나의 경로 매개 변수를 사용하여 다른 곳으로 변수를 보내려고합니다. 내 첫 번째 구성 요소에서 나는 ID를 보내려면이 기능을 사용경로 매개 변수를 읽으십시오. angular2

내 라우팅 모듈은 다음과 같습니다
sendId(id : string) : void { 
    this.router.navigate(['/component2', id]); 
} 

:

const routes: Routes = [ 
{ path: 'component2/:id', component: Component2}, 
{ path: '**', redirectTo: '' } 
]; 

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

export class AppRoutingModule {} 

그리고

내 두 번째 구성 요소에서이 같은 그것을 읽으려고 해요 :

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

export class Component2 implements OnInit { 
    id: string; 

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

ngOnInit() { 
    this.route.params.subscribe(params => { this.id = +params['id']; 
    }); 

    console.log(this.id); 
} 

그러나 null 값을받습니다. 나는 무엇을 놓치고 있습니까?

답변

1

subscribe 기능에 console.log을 넣어 :

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

export class Component2 implements OnInit { 
    id: string; 
    private sub: any; <---- add subcriber 

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

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.id = params['id']; <---- remove '+' 
}); 

console.log(this.id); 
} 

나는 가입자를 추가로 해, params [ 'ID'에서 '+'를 제거 ]

4

경로에서 값을 얻기 전에 console.log(this.id);이 작동하기 때문에. 이처럼 내 컴포넌트 2의 코드를 변경하여 내가 그것을 할 관리

ngOnInit() { 
    this.route.params.subscribe(params => { 
     this.id = +params['id']; 
     console.log(this.id); 
    }); 
} 
+0

console.log를 안에 넣으면 여전히 null이됩니다. – Ayane

관련 문제