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

Question

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

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

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

Angular 组件有类似的技术吗？

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

Answer 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 可以使用您喜欢的任何参数进行任何标记。