将数据从app组件传递/绑定到Angular 2中的其他组件

Question

  

编辑：OP评论：   ＆＃34;对不起，但我想我在环境/环境中有轻微的错误，抱歉浪费你的时间，现在似乎工作＆＃34;

我无法将数据从app组件传递到角度为2的子组件。我最近开始玩角度2并试图了解它是如何工作的。我尝试使用本教程中显示的概念将数据传递给子组件

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

但我觉得我错过了什么

这是我的项目：App组件：

import { Component, ViewChild } from '@angular/core';
import { WorkflowService } from './components/workflow_display/workflow.service';
import { WorkflowDisplayComponent } from './components/workflow_display/workflow-display.component';
import { PropertyService } from  './shared/property.service';
import '../../public/css/styles.css';

@Component({
  selector: 'my-app',
  template: require('./app.component.html')


})

export class AppComponent {
  title = 'Hello World';
  @ViewChild("taskDisplay") workflowDisplay: WorkflowDisplayComponent;
  myEnvironment: String; //the variable I am trying to bind from
  errorMessage: String;
  workbenchBaseUrl : String = 'workbenchBaseUrl';
  public selectedNavID : String = 'workspace_control_workStreamView';
  public isWorkOrdersCollapsed = false;
  public isWorkStreamsCollapsed = false;



  constructor(private _propertyService : PropertyService){

  }

 ngOnInit(): void {
    this._propertyService.getValue(this.workbenchBaseUrl)
        .subscribe(environment => this.myEnvironment = environment,
            error => this.errorMessage = <any>error);

  }


}

app.component.html

<div>
<div>
<div>
<!--some html-->
           <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 mh-100">
                <workflow-display [environment] ="myEnvironment" #taskDisplay></workflow-display>
            </main>
        </div>
    </div>
</div>

WorkDisplay组件

import { Component, Input} from '@angular/core';
import { OnInit } from '@angular/core';
import { IGrcTask } from './grc-task';
import { WorkflowService } from './workflow.service';
import { PropertyService } from  '../../shared/property.service';


@Component({
    selector: 'workflow-display',
    template: require('./workflow-display.component.html')
})
export class WorkflowDisplayComponent implements OnInit {
    taskMode: string = 'workstream'; // 'workorder' or 'workstream' to currently identify the columns to display
    taskQuery: string = 'process=workstream&taskStatus=RUNNING'; // the query parameters to pass to the tasks web service
    workbenchUrl: string = 'http://localhost:8081'; // workbench URL
    workbenchTaskPage: string = 'wsIndex'; // workbench page to use to open tasks
    infoMessage: string;
    errorMessage: string;
    tasks: IGrcTask[];
    currentTask: IGrcTask;
    @Input()
    environment: String;  //the variable I am trying to bind to
    workbenchBaseUrl : String = 'workbenchBaseUrl';





    constructor() {

    }


   //called when user clicks a row
    openTask(event: any, task: any) {
        // this.environment is still undefined
        window.open(this.environment + this.workbenchTaskPage + "?taskId=" + task.taskId + "&activitiWorkflow=true");
    }







}

WorkDisplay.component.html

<--!some html-->
<tbody *ngIf='(taskMode == "workorder") && tasks && tasks.length'>
            <ng-container *ngFor='let task of tasks; let i=index'>
                <tr (click)="setCurrentTask($event, task)" (dblclick)="openTask($event, task)"
<--!some html-->

Property.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

/**
 * Service return Property value/values from the project property file
 * 
 */
@Injectable()
export class PropertyService {

    //ReST Url for the PopertyService on the back end
    private _url = '/grcworkflow/resources/grcWorkflow/environment/';

    constructor(private _http: Http) {}

    /**
     * Method return an Observable<String -> Value> for any property
     * Method make an http get call to the server to fetch the property
     * @Param key for the property in the property file 
     */
    getValue(key: String): Observable<String> {
        return this._http.get(this._url+key)
            .map((response: Response) => <String> response.text())
            .do(data => console.log('All: ' +  data))
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }

}

注意我已从可能无关的组件中删除了一些函数定义和变量。

我正在尝试绑定app.component环境值的myEnviroment值。当proerty服务返回一个字符串时，myEnviroment会被设置。虽然环境价值仍未定义。

我正在寻找单向绑定，即当myEnvironment（父）更改环境（子）时也应该更改。但这似乎不会发生。请帮忙