2017-02-10 11 views
0

私は2つのコンポーネントを持っており、ルートパラメータを使用して変数を1つからもう1つに送信したいと考えています。私はIDを送信するには、この機能を使用する私の最初のコンポーネントで:ルートパラメータの読み取りangle2

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

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

export class AppRoutingModule {} 

そして、私はこのようにそれを読んしようとしている私の第二の成分で:

sendId(id : string) : void { 
    this.router.navigate(['/component2', id]); 
} 

マイルーティングモジュールは、次のようになります

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

関連する問題