如何使用Custom元素实现Angular的“盒子里的香蕉”双向绑定？

// 自定义元素
class BananaBox extends HTMLElement {
  private _value: string;

  constructor() {
    super();
  }

  connectedCallback() {
    this.addEventListener('bananaChange', (event: CustomEvent) => {
      this.value = event.detail;
    });
  }

  get value(): string {
    return this._value;
  }

  set value(newValue: string) {
    if (this._value !== newValue) {
      this._value = newValue;
      this.dispatchEvent(new CustomEvent('bananaChange', { detail: newValue }));
    }
  }
}

// 在Angular组件中使用自定义元素
@Component({
  selector: 'app-banana',
  template: `
    <input [(ngModel)]="bananaValue" (ngModelChange)="onBananaChange($event)">
    <banana-box></banana-box>
  `
})
export class BananaComponent implements AfterViewInit {
  @ViewChild(BananaBox) bananaBox: BananaBox;
  bananaValue: string;

  ngAfterViewInit() {
    this.bananaBox.value = this.bananaValue;
  }

  onBananaChange(newValue: string) {
    this.bananaValue = newValue;
    this.bananaBox.value = newValue;
  }
}