Как передать данные от родительского к дочерним компонентам?

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 (логическое значение). Кажется, что компонент передается до того, как произойдет привязка.

Имеет ли это смысл? Где моя ошибка?

Ссылка: Angular 2 - Component Communication

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().

Обратите внимание, как NONE из этих сценариев использует {{ ... }}.

В вашем случае проблема может заключаться в том, что ваш метод disableSubmitButton() не возвращает правильное значение. (Кроме того, как сказал Ron537, вы должны отказаться от {{ ... }}.)

Answer 2

Попытка удалить двойную скобку от связывания.

Вместо этого:

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

Используйте это:

[submitButtonDisabled]="disableSubmitButton()" 

Или это:

submitButtonDisabled="{{disableSubmitButton()}}"