问题描述
在反应中，我可以任意传递道具，如下所示：
In react I can arbitrarily pass props down like so:
function SomeComponent(props) {
const {takeOutProp, ...restOfProps} = props;
return <div {...restOfProps}/>;
}
我如何在Angular中做同样的事情？
How can I do the same thing in Angular?
-
更具体地说，我想编写一个自定义下拉组件并将道具传递到选择框。
More specifically, I want to write a custom dropdown component and pass props down to a select box.
推荐答案
与React组件相反，Angular组件不会在输入更改时重新编译，并使用 @Input 属性修饰器，用于启用更改检测。预期传递的所有属性都应明确定义为组件输入。
As opposed to React components, Angular components aren't recompiled on input changes and use @Input property decorators to enable change detection. All properties that are expected to be passed should be explicitly defined as component inputs.
对于自定义选择组件，没有比此更好的选项。可以从当前组件元素中读取静态属性并将它们设置在嵌套组件元素上，但这不会设置绑定。
There are no better options than this one for custom select component. It's possible to read static attributes from current component element and set them on nested component element, but this won't set up bindings.
As for react recipe for wrapped props in wrapped components：
As for React recipe for deep props in wrapped components:
const Baz = props => <p>{props.baz}</p>;
const Bar = props => <Baz {...props} />;
const Foo = props => <Bar {...props} />;
这通常由Angular DI和注入器层次结构处理。可以在相应的注入器上定义提供程序，以使嵌套组件可以使用数据和行为。
This is usually handled by Angular DI and a hierarchy of injectors. A provider can be defined on respective injector in order to make data and behaviour available to nested components.
这篇关于如何像Angact一样在Angular 2+中传递道具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！