如何像 React 一样在 Angular 2+ 中传递道具？答案

【问题标题】：How can I pass props down in Angular 2+ like React?如何像 React 一样在 Angular 2+ 中传递道具？
【发布时间】：2018-04-28 01:39:22
【问题描述】：

在反应中，我可以像这样任意传递道具：

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

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

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

【问题讨论】：

你不只是使用 react wink
@OrthoHomeDefense 这就是我告诉我的团队的，但不幸的是这不是我的决定

标签： javascript angular reactjs typescript

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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

【讨论】：