Angular:链式双向属性绑定(bind)

Question

我正在尝试通过将第三方组件包装到自定义组件中来扩展具有一些自定义功能的第三方组件。

但是我遇到了属性绑定(bind)的问题——如何在父组件、包装器和第 3 方组件之间创建双向属性绑定(bind)？ (链式双向绑定(bind)属性:)

所以简化的 html 模板看起来像这样

wrapper-component.html
<someCompotentToExtend [(ngModel)]="wrapProperty"></someCompotentToExtend>
}

wrapper-component.ts
export class WrapperComponent{
   wrapProperty:string=""
}

在父组件中我会做这样的事情

parent-component.html
<wrapper-component [(wrapProperty)]="parentProperty"></<wrapper-component>

parent-component.ts
export class ParentComponent{
   parentProperty:string=""
}

更改这些属性中的任何一个都应该更新所有其他绑定(bind)属性？

我进行了一堆测试，在这两个示例中我接近解决方案，但它太hacky并且最终无法正常工作

第一个解决方案

使用 @Input @Output在包装组件或 on model change event . Wrapper 组件具有中间属性，例如 wrapProperty绑定(bind)到 3d 派对组件或监听更改。
这将有点工作。就我而言，这不是我想要的，因为在包装器更新父级后，父级将更新包装器组件:？？？ :)

export class WrappedComponentComponent {
  wrapProperty:string=""

  @Input() set propertyFromParent(value: string) {    
    this.wrapProperty= value;
  }
  @Output() propertyFromParentChange= new EventEmitter();

第二种解决方案

使用这个框架 ngx-context .
真的很酷，创建一个临时的本地提供者服务，您可以通过它共享数据。但是在调用包装器组件时它需要额外的语法，我需要一些更封装的东西。

是否可以创建一个链接的双向属性绑定(bind)系统？
谢谢，任何帮助表示赞赏

Answer 1

这是一个有效的解决方案
https://stackblitz.com/edit/angular-di6px5?file=app%2Fform.component.ts

我不小心出错并使用了 [(ngModel)] 而不是将它们分成 [ngModel] 和 (ngModelChange)。分离允许更好地控制属性并避免我收到的额外更新事件。