组件属性到子组件的 Angular 完美转发

Question

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

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

使用它您可以完美地包装组件而无需重新实现它们的接口(interface)。

Angular 组件是否有类似的技术？

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

Answer 1

I want to wrap an to add some html elements around it for styling and animation. Else I would have to repeat these elements many times.

ngcontent 是你的 friend !

   @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 可以包含您想要的任何标记和您喜欢的任何参数。