将组件属性完美地转发到子组件

Posted 2023-02-19

【中文标题】将组件属性完美地转发到子组件

【英文标题】：Angular perfect fowarding of component properties to a child component

【发布时间】：2018-01-12 08:44:46

【问题描述】：

我最近意识到 React 中的以下技术可以将属性转发给子组件。这使用解构赋值：

const MyInputComponent = (props) => <input ...props />

使用它，您可以完美地包装组件，而无需重新实现它们的界面。

Angular 组件有类似的技术吗？

编辑：发现重复的Angular2: passing ALL the attributes to the child component

【问题讨论】：

你想如何使用这个组件？

您是否正在尝试找出两个父子组件之间的通信方式？

我在这里看不到任何新的或不同的东西。它在角度上的工作原理相同。顺便说一句，可以在没有接口的情况下传递参数，但是你错过了打字稿的重点。

@RahulSingh 我想包装一个 以在其周围添加一些 html 元素以用于样式和动画。否则我将不得不多次重复这些元素。但我想避免处理事件和其他输入属性，如“id”或“step”或“disabled”或“max”或“min”等。

@Avi 你能举个例子吗？

【参考方案1】：

我想包装一个在它周围添加一些 html 元素 造型和动画。否则我将不得不多次重复这些元素 次。

ngcontent 是你的朋友！

   @Component(
      selector: 'my-wrapper',
      template: `
        <h1>my fancy header</h1>
        <ng-content>YOUR INPUT WILL GO HERE</ng-content>

        `
    )

标记任何你想使用包装器的地方：

    <div>
       <my-wrapper>
          <input .../>
       </my-wrapper>
   </div>

如您所见，包装器可以包含您想要的任何模板以及您喜欢的任何参数。 您放入的内部 html 可以使用您喜欢的任何参数进行任何标记。

【讨论】：

您是正确的，这符合我为您描述的要求，但显然这是一种不太强大的方法，因为我无法拦截子项的属性或添加我自己的属性。跨度>