Question

我有一个简单的应用程序，其中有一个主要组件和一个子组件。主要组件接受子组件将使用的数据值。所以我在index.html -

中定义如下

  <my-app [mydata]="'Some sample data'">
    loading...
  </my-app>

在我的主要组件中，我定义了输入属性'mydata' -

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <child-app [data]="mydata"></child-app>
    </div>
  `,
  directives: [childApp],
  inputs: ['mydata']
})
export class App {
  mydata: string;

  constructor() {
    this.name = 'Angular2'
  }
}

在主要组件的视图中，我使用了子组件并传递了mydata属性并将其绑定到子组件的'data'属性 -

  <child-app [data]="mydata"></child-app>

这是我的孩子组件 -

@Component({
  selector: 'child-app',
  providers: [],
  template: `
    <div>
      <h2>This is my data: {{data}}</h2>
    </div>
  `,
  directives: [childApp],
  inputs: ['data']
})
export class childApp {
  data: string;

  constructor() {
    this.name = 'Angular2'
  }
}

不幸的是，最终输出没有显示我在index.html中传递的'Some sample data'。

有关示例代码，请参阅此plunk。

有关如何跨子组件传递数据的任何建议吗？

Answer 1

根组件（

os.system('""%s" "%s""'%(self.settings.Dic["Editor"],self.path))

）目前不支持

@Input()。

另见https://github.com/angular/angular/issues/1858

作为解决方法，您可以使用

AppComponent

（仅允许字符串）

Angular2：将数据传递给子组件

1 个答案: