web-dev-qa-db-ja.com

angular2のコンポーネントの相互作用を使用して<router-outlet>を介してデータを渡します

私はこの手法を使用しようとしています セッターで入力プロパティの変更をインターセプト いくつかのデータを親コンポーネントから子コンポーネントに渡し、値が変更されたときに子コンポーネントのメソッドを呼び出します。私の問題は、子コンポーネントが<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>を使用するときに、親コンポーネントから子コンポーネントにデータを渡す正しい方法は何ですか？

事前に感謝し、どんな助けにも感謝します。

angularangular2-routingangular-componentsrouter-outlet
9
Bahman Rouhani

サービス：

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--);
  }
}
8
egor.xyz