Angular：链式双向 属性 绑定

Question

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

但我在 属性 绑定方面遇到问题 - 如何在父组件、包装器和第 3 方组件之间创建双向 属性 绑定？ （链式双向绑定 属性 :)

如此简化的 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=""
}

更改任何这些属性应该更新所有其他绑定属性？

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

第一个解决方案

在包装器组件中使用 @Input @Output 或 on model change event。包装器组件有一个中介 属性，例如 wrapProperty，它绑定到 3d 派对组件或侦听更改。 这会有点工作。在我的例子中，这不是我想要的，因为在包装器更新父级之后，父级将更新包装器组件：？？？ :)

export class WrappedComponentComponent {
  wrapProperty:string=""

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

第二种解决方案

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

是否可以创建链式双向属性绑定系统？ 谢谢，感谢您的帮助

Answer 1

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

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