使用 angular2 中的组件交互通过 <router-outlet> 传递数据
pass data through <router-outlet> using component interaction in angular2
我正在尝试使用此技术 intercept input property changes with a setter 将一些数据从 parent 组件传递到 child 组件并在 child 组件中调用方法该值已更改。我的问题是 child 组件通过 <router-link>
绑定到 parent,当我尝试使用以下方式传递数据时:
parent_component.html :
<router-outlet [some_value] = "some_value"></router-outlet>
其中 some_value 是我试图从 parent 传递到 child 的参数。
parent_component.ts :
public some_value: string;
和
parent_component.ts :
@Input()
public set some_vale(number : string){
this._some_value = number;
}
但是我收到错误
Unhandled Promise rejection: Template parse errors:
Can't bind to 'some_value' since it isn't a known property of 'router-outlet'.
我做错了什么?使用 <router-outlet>
时,将数据从 parent 传递到 child 组件的正确方法是什么?
提前致谢,感谢您的帮助。
服务:
import {Injectable, EventEmitter} from "@angular/core";
@Injectable()
export class DataService {
onGetData: EventEmitter = new EventEmitter();
getData() {
this.http.post(...params).map(res => {
this.onGetData.emit(res.json());
})
}
组件:
import {Component} from '@angular/core';
import {DataService} from "../services/data.service";
@Component()
export class MyComponent {
constructor(private DataService:DataService) {
this.DataService.onGetData.subscribe(res => {
(from service on .emit() )
})
}
//To send data to all subscribers from current component
sendData() {
this.DataService.onGetData.emit(--NEW DATA--);
}
}
我正在尝试使用此技术 intercept input property changes with a setter 将一些数据从 parent 组件传递到 child 组件并在 child 组件中调用方法该值已更改。我的问题是 child 组件通过 <router-link>
绑定到 parent,当我尝试使用以下方式传递数据时:
parent_component.html :
<router-outlet [some_value] = "some_value"></router-outlet>
其中 some_value 是我试图从 parent 传递到 child 的参数。
parent_component.ts :
public some_value: string;
和
parent_component.ts :
@Input()
public set some_vale(number : string){
this._some_value = number;
}
但是我收到错误
Unhandled Promise rejection: Template parse errors: Can't bind to 'some_value' since it isn't a known property of 'router-outlet'.
我做错了什么?使用 <router-outlet>
时,将数据从 parent 传递到 child 组件的正确方法是什么?
提前致谢,感谢您的帮助。
服务:
import {Injectable, EventEmitter} from "@angular/core";
@Injectable()
export class DataService {
onGetData: EventEmitter = new EventEmitter();
getData() {
this.http.post(...params).map(res => {
this.onGetData.emit(res.json());
})
}
组件:
import {Component} from '@angular/core';
import {DataService} from "../services/data.service";
@Component()
export class MyComponent {
constructor(private DataService:DataService) {
this.DataService.onGetData.subscribe(res => {
(from service on .emit() )
})
}
//To send data to all subscribers from current component
sendData() {
this.DataService.onGetData.emit(--NEW DATA--);
}
}