组件中的 Aurelia 自定义组件

Question

我有一个名为选择器的基本组件

<template>
    <span> this is common for all selectors </span>
      <div>
        <content>
        </content
      </div>
</template>

import {transient} from "aurelia-framework"; 

@transient() 
export class Selector { 
  constructor(){ 
    console.log("selector called"); 
  } 
}

我有 SelectorBase 类

@transient() 

export class SelectorBase { 
    @bindable({ name: 'myProp', defaultBindingMode: bindingMode.twoWay }) myProp = null;
    constructor() { 
      console.log("selector base called"); 
    } 
}

和 2 个派生组件，称为 SelectorA 和 SelectorB。这是一个例子

<template>
  <div>
    This is selector A
  </div>
</template>

import {SelectorBase} from "./selectorBase"; 
import { transient} from "aurelia-framework";

@transient() 
export class SelectorA extends SelectorBase{ 
  constructor() { 
    super(); 
    console.log("selector A called"); 
  } 
}

我对选择器 B 也有同样的看法。

我不是从 Selector 派生的，而是从 SelectorBase 派生的。所以我的 SelectorA 和 SelectorB 组件嵌入在 Selector 组件中

我在我的观点中这样使用它

<require from="./../../selector"></require>
<require from="./../../selectorA"></require>

<selector>
  <selector-a></selector-a>
</selector>

当我打开我的第一个具有 selectorA 的 View 时这有效(正在调用 SelectorBase 和 SelectorA 构造函数)，但是当我打开另一个具有选择器 B 的 View 时内容部分不显示(仅来自基本选择器的 html)。 调用了 SelectorBase 构造函数，但未调用 SelectorB 构造函数

我必须提到，当我导航回我的第一个 View 时，一切正常(按预期调用 SelectorBase 和 SelectorA 构造函数)

我找不到我做错了什么。

编辑 我认为我在 SelectorBase 上的可绑定(bind)属性导致了这个问题。不知道为什么。

谢谢

Answer 1

为了回答我自己的问题， 因为我怀疑问题是我在基类中的可绑定(bind)属性。 我从 SelectorBase 类中删除了可绑定(bind)属性，并创建了一个装饰器来创建通用可绑定(bind)属性，并将该装饰器添加到派生类中。

import {BindableProperty, HtmlBehaviorResource} from 'aurelia-templating';
import {metadata} from 'aurelia-metadata';
import {bindingMode} from 'aurelia-binding';


export function generateSelectorBindables(): any {
    return function (target: Function, key: string, descriptor: any) : void {
        // get or create the HtmlBehaviorResource
        // on which we're going to create the BindableProperty's

        let behaviorResource = <HtmlBehaviorResource>metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target, key);

        let myProp = new BindableProperty({ name: 'myBindableProperty', defaultBindingMode: bindingMode.twoWay });
        myProp .registerWith(target, behaviorResource, descriptor);

        };
}

我正在像这样在我的派生选择器中使用它

import {generateSelectorBindables} from "./generateSelectorBindables";

@autoinject
@transient()
@generateSelectorBindables()
export class SelectorA extends SelectorBase {