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

发布时间：2020-12-17 18:06:29 所属栏目：安全来源：网络整理

导读：我最近意识到React中的以下技术将属性转换为子组件.这使用了解构赋值： const MyInputComponent = (props) = input {...props} / 使用它,您可以完美地包装组件,而无需重新实现其界面. Angular组件是否有类似的技术？编辑：发现重复Angular2: passing ALL th

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

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

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

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

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

解决方法

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是你的朋友！

@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可以使用你喜欢的任何参数获得任何你想要的标记.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!