【问题标题】：pass data through <router-outlet> using component interaction in angular2使用angular2中的组件交互通过<router-outlet>传递数据
【发布时间】：2017-12-29 00:13:32
【问题描述】：

我正在尝试使用这种技术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;
  }

但是我得到了错误

未处理的 Promise 拒绝：模板解析错误：无法绑定到“some_value”，因为它不是“router-outlet”的已知属性。

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

在此先感谢您的帮助。

【问题讨论】：

到目前为止，中还没有属性绑定，你可以使用服务来实现组件之间的通信。
所以根本没有办法做到这一点？
我认为你不能这样做。如果你想从路由器向子节点发送数据，声明一个 Service 并使用 Observable 发送你的对象。您将对声明路由器的组件执行 .next(your-object) 和 .subscribe(object => {...});在子组件上
Passing data into "router-outlet" child components (angular 2)的可能重复
不，bcs在使用属性绑定时，绑定了一个必须存在的属性，但不能确保它会存在于中。

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

【解决方案1】：

服务：

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

【讨论】：