Question

我有2个自定义控件parent-control和child-control。我需要孩子代表父母执行功能。并且要求孩子应该在父母边界内使用。

用法示例

...<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>...

父 - control.html

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

parent-control.ts （假设所有导入）

export class ParentControlCustomElement {
  @bindable shared: any;

  bind(bindingContext, overrideContext) {
    //here want to make sure elements rendered inside slot 
    //are able to access 'shared'
  }
}

儿童-control.html

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

child-control.ts （假设所有导入）

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'
  }
}

如何确保从parent-control内部组件开始将获得指向parent-control视图模型的绑定上下文？

Answer 1

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

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

如果您不确定子控件是否将在父级中使用，请使用@inject(Optional.of(ParentControlCustomElement))。

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

1 个答案: