在 Angular 2 中，组件通常需要与其它组件进行交互。为了实现组件之间的通信，可以使用输入和输出属性。其中，@Input 装饰器用于声明一个组件的属性是可输入的，即该属性可以从其它组件中传入值。
但是，在实际开发中，有时候会遇到 @Input 不起作用的问题。这篇文章将介绍一些常见的原因和解决方法。
原因一：属性名称拼写错误
当我们在组件中定义了一个 @Input 属性后，我们需要在其它组件中使用该属性，并且要确保输入属性的名称与定义时相同。如果输入属性的名称拼写错误，则无法正确获取传递的值。
以下是一个示例代码：
@Component({
selector: 'app-child',
template: '<p>{{message}}</p>'
})
export class ChildComponent {
@Input() message: string;
}在父组件中使用：
<app-child [messag]="hello"></app-child>
上述代码中，我们将输入属性 message 的名称拼写错误为 messag，导致无法正常传递值。应该修改为：
<app-child [message]="hello"></app-child>
原因二：父组件没有传递值
如果父组件没有传递值给子组件的输入属性，那么子组件就无法获取到传递的值。
以下是一个示例代码：
@Component({
selector: 'app-child',
template: '<p>{{message}}</p>'
})
export class ChildComponent {
@Input() message: string;
}在父组件中未传递值：
<app-child></app-child>
上述代码中，我们没有传递任何值给 message 属性，因此无法显示任何消息。应该修改为：
<app-child [message]="'hello'"></app-child>
原因三：变更检测策略不正确
在 Angular 中，组件默认使用 OnPush 变更检测策略。如果我们没有正确配置变更检测策略，则可能会导致输入属性无法正常更新。
以下是一个示例代码：
@Component({
selector: 'app-child',
template: '<p>{{message}}</p>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
@Input() message: string;
}在父组件中更新：
-- -------------------- ---- -------
------------
--------- -------------
--------- -
------- -------------------------------- ----------------
---------- --------------------------------
--
---------------- -------------------------------
--
------ ----- --------------- -
------- - --------
--------------- -
------------ - --------
-
-上述代码中，我们在子组件中使用了 OnPush 变更检测策略，而在父组件中使用了默认的变更检测策略。因此，当我们更新 message 属性时，子组件无法获取到更新后的值。应该将父组件中的变更检测策略改为 OnPush：
-- -------------------- ---- -------
------------
--------- -------------
--------- -
------- -------------------------------- ----------------
---------- --------------------------------
--
---------------- ------------------------------
--
------ ----- --------------- -
------- - --------
--------------- -
------------ - --------
-
-结论
在 Angular 2 中，@Input 装饰器是实现组件间通信的重要方式。当 @Input 不起作用时，我们可以检查属性名称拼写、父组件是否传递了值以及变更检测策略是否正确等问题。同时，建议开发者多运
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25357