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

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 returns（布尔值）如何，提交按钮都保持禁用状态。似乎组件在绑定发生之前被渲染。

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

Answer 1

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

而不是这个：

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

使用这个：

[submitButtonDisabled]="disableSubmitButton()"

或者这个：

submitButtonDisabled="{{disableSubmitButton()}}"

Answer 2

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

<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，或者由 [=] 编辑的值 return 18=]方法。

注意这些场景中的 NONE 如何使用 {{ ... }}。

在您的情况下，问题可能是您的方法 disableSubmitButton() 没有 return 正确的值。（此外，如 Ron537 所说，您应该删除 {{ ... }}。）

How to pass data from parent to child components?