使用angular2

时间:2017-07-23 08:38:32

标签: angular angular2-routing angular-components router-outlet

我正在尝试使用此技术intercept input property changes with a setter将一些数据从父组件传递到子组件,并在更改值时调用子组件中的方法。我的问题是,<router-link>将子组件绑定到父组件,当我尝试使用以下方式传递数据时:

parent_component.html:

<router-outlet [some_value] = "some_value"></router-outlet>

其中some_value是我尝试从父级传递给子级的参数。

parent_component.ts:

public some_value: string;

parent_component.ts:

@Input()
  public set some_vale(number : string){
    this._some_value = number;
  }

然而我收到了错误

  

未处理的承诺拒绝:模板解析错误:   无法绑定到'some_value',因为它不是'router-outlet'的已知属性。

我做错了什么?使用<router-outlet>时,将数据从父组件传递到子组件的正确方法是什么?

提前致谢并感谢任何帮助。

1 个答案:

答案 0 :(得分:7)

服务:

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--);
  }
}