Question

在反应过程中，我可以任意传递道具，如下：

function SomeComponent(props) {
  const {takeOutProp, ...restOfProps} = props;
  return <div {...restOfProps}/>;
}

如何在Angular中做同样的事情？

-

更具体地说，我想编写一个自定义下拉组件并将道具传递给选择框。

Answer 1

与React组件相反，Angular组件在输入更改时不会重新编译，并使用@Input属性装饰器来启用更改检测。期望传递的所有属性都应明确定义为组件输入。

对于自定义选择组件，没有比此更好的选项。可以从当前组件元素中读取静态属性并将它们设置在嵌套组件元素上，但这不会设置绑定。

至于包裹组件中深层道具的React配方：

const Baz = props => <p>{props.baz}</p>;
const Bar = props => <Baz {...props} />;
const Foo = props => <Bar {...props} />;

这通常由Angular DI和注射器层次结构处理。可以在相应的注入器上定义提供程序，以使嵌套组件可以使用数据和行为。

Answer 2

实际上这不是你问题的答案，但也许对你有帮助。您可以添加一个自定义指令以及您需要的所有参数。

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[defaultConfig]'
})
export class DefaultDropdownConfigDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
       // your default config

    }
}

<my-dropdown defaultConfig></my-dropdown>

有关详细信息，请参阅this

如何像Angact一样在Angular 2+中传递道具？

2 个答案: