angular - 以角度将指令/输入传递给孩子的反应方式是什么？

Question

在反应中，你可以简单地写这个：

<component {...props} /> 

将属性从父级传递给子级。我知道在角度您可以使用@Input 来接收和传递数据，但是您将如何处理动态指令列表以传递给子元素？只是为了说明情况：

<custom-button [color]="color" [x]="some value" [y]="some other val"/>

并且您的自定义按钮应将所有这些输入传递给自定义按钮组件中的包装按钮元素。

Answer 1

你可以通过几种方式做到这一点。例如，您可以有一个服务，例如SharedComponentXStateService，在父子节点之间共享状态值。

更接近 React 功能的方法是拥有一个上下文变量，其中包含在父子之间共享的所有变量。在接受它的子节点上创建一个输入，并从父节点传递值。

/** context interface */
export interface IComponentXContext {
  color: string;
  x: string;
  y: string;
}

/** parent component */
@Component({
  template: <custom-button context="context" />
})
export class ParentXComponent {
  context: IComponentXContext = { color: 'red', x: 'x', y: 'y' }
}

/** child component */
@Component({
  selector: 'custom-button'
})
export class CustomButtonComponent {
  @Input()
  context: IComponentXContext;
}