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

Question

我在子组件中有此属性：

@Input() submitButtonDisabled: boolean;

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

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

子组件模板读取其 以这种方式submitButtonDisabled属性：

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

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

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

参考：角度 2 - 组件通信

Answer 1

如果要

将字符串文本传递给输入属性，请不要使用方括号：

<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 将包含布尔true或false，或 shouldItBeDisabled() 方法返回的值。

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

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

Answer 2

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

取而代之的是：

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

使用这个 ：

[submitButtonDisabled]="disableSubmitButton()"

或者这个：

submitButtonDisabled="{{disableSubmitButton()}}"