Javascript 创建要由子视图模型使用的新bindingContext

我有两个自定义控件

父控件

和

子控件

。我需要孩子代表家长执行功能。而要求是子级应该在父级边界内使用

用法示例

...<content-around> <!-- this is 'outerContext' bindingContext -->
  <parent-control shared.bind="outerContext.something">
    <div>
      <child-control property="nameOfMemberOfShared"></child-control>
    </div>
    <div>
      <span>some text here</span>
      <child-control property="anotherNameOfMemberOfShared"></child-control>
    </div>
  </parent-control>
</content-around>...

---

子控件.html

<template>
  <slot></slot>
</template>

<template>
  <!-- this is for simplicity more advanced stuff needed here -->
  <h1>${sharedObject[property]}</h1>
</template>

---

如何确保从

父控件

开始的内部组件将获得指向

父控件

视图模型的绑定上下文

如果您知道您的子控件将始终在父控件中使用，则可以声明对祖先/父控件的依赖关系：

@inject(ParentControlCustomElement)
export class ChildControlCustomElement {
  constructor(parentControl) {
    this.parentControl = parentControl;
  }
}

---

如果您不确定是否会在父控件中使用子控件，请使用

@inject（可选的.of（ParentControlCustomElement））

有趣的是，让我试试

export class ChildControlCustomElement {
  @bindable property: string;
  sharedObject: any;

  bind(bindingContext, overrideContext) {
    this.sharedObject = bindingContext.shared;
    // the problem is HERE!
    // instead of getting a binding context pointing 
    // to parent-control view model I get binding context
    // pointing to 'outerContext'
  }
}

@inject(ParentControlCustomElement)
export class ChildControlCustomElement {
  constructor(parentControl) {
    this.parentControl = parentControl;
  }
}