角度完美地向组件属性发送组件属性

Question

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

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

使用它,您可以完美地包装组件,而无需重新实现其界面.

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

编辑:找到重复的Angular2:将所有属性传递给子组件

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