如何将数据从父组件传递到子组件?

时间:2017-01-21 09:04:24

标签: angular typescript angular2-components angular2-databinding

我在子组件中有这个属性:

@Input() submitButtonDisabled: boolean;

在我父组件的模板中,我使用插值通过属性绑定设置它:

<my-child-component
  [submitButtonDisabled]="{{disableSubmitButton()}}">
</my-child-component>

子组件模板读取它 这样submitButtonDisabled属性:

<button id="btSubmit" type="submit" (click)="submit()" 
  [disabled]="submitButtonDisabled">Ok</button>

调试我的打字稿代码我看到属性绑定工作正常,但无论disableSubmitButton返回什么(布尔值),提交按钮都会被禁用。似乎组件在绑定发生之前呈现。

这有什么意义吗?我的错误在哪里?

参考:Angular 2 - Component Communication

2 个答案:

答案 0 :(得分:5)

如果您将字符串文字传递给输入属性,请勿使用方括号:

<my-comp isDisabled="yes"></my-comp>
<my-comp isDisabled="no"></my-comp>

在此示例中,输入属性isDisabled将包含字符串'yes''no'

如果您传递除字符串文字以外的任何内容,那么您必须使用方括号:

<my-comp [isDisabled]="true"></my-comp>
<my-comp [isDisabled]="false"></my-comp>
<my-comp [isDisabled]="shouldItBeDisabled()"></my-comp>

在该示例中,输入属性isDisabled将包含布尔值truefalse,或shouldItBeDisabled()方法返回的值。

请注意这些方案中没有一个使用{{ ... }}

在您的情况下,问题可能是您的方法disableSubmitButton()未返回正确的值。 (另外,就像Ron537所说,你应该放弃{{ ... }}。)

答案 1 :(得分:1)

尝试从绑定中删除双括号。

而不是:

[submitButtonDisabled]="{{disableSubmitButton()}}"

使用此:

[submitButtonDisabled]="disableSubmitButton()"

或者这个:

submitButtonDisabled="{{disableSubmitButton()}}"