Javascript 将数据从应用程序组件传递/绑定到Angular 2中的其他组件

编辑：按OP发表评论：

---

“对不起，我想我在环境/环境方面有点输入错误，很抱歉浪费了你的时间，现在似乎可以用了”

在angular 2中，我无法将数据从应用程序组件传递到子组件。我最近开始玩弄angular 2，试图了解它是如何工作的。我尝试使用本教程中所示的概念将数据传递给子组件

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







}

但我想我错过了什么

这是我的项目：应用程序组件：

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

  }


}

WorkDisplay.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>

<--!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-->

任何财产
*方法对服务器进行http get调用以获取属性
*属性文件中属性的@Param key
*/
getValue（键：字符串）：可观察{
返回此。_http.get（此。_url+键）
.map（（response:response）=>response.text（））
.do（data=>console.log（'All:'+data））
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）{
返回Observable.throw（error.json（）.error | |'Server error'）；
}
}

注意，我已经从组件中删除了一些可能不相关的函数定义和变量。 我正在尝试绑定app.component环境值的MyEnvironment值。在proerty服务返回字符串时设置MyEnvironment。尽管环境值仍然未定义

---

我正在寻找单向绑定，即当我的环境（父）改变时，环境（子）也应该改变。但这似乎没有发生。请在此提供帮助

您是否尝试将

x{{{environment}}y

添加到

WorkflowDisplayComponent

？它是否显示除xy之外的任何内容？是否有任何错误？实际上，我不知道它是否与此有关，但

String

不是一种类型的typescript<代码>字符串将是此处使用的正确类型。也许可以尝试用一个示例字符串在组件中预设

myEnvironment

和

environment

，看看如果您遵循GünterZöchbauerSorry的建议会发生什么，但我想我在environment/environment中有点输入错误，很抱歉浪费您的时间，它现在似乎可以工作了：|

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

}