组件中的 Aurelia 自定义组件答案

【问题标题】：Aurelia custom component in component组件中的 Aurelia 自定义组件
【发布时间】：2016-03-07 01:17:44
【问题描述】：

我有一个叫做选择器的基本组件

<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 的视图时，它可以工作（正在调用 SelectorBase 和 SelectorA 构造函数），但是当我打开具有选择器 B 内容的其他视图时，不显示部分内容（仅来自基本选择器的 html）。调用了 SelectorBase 构造函数，但未调用 SelectorB 构造函数

我必须提到，当我导航回第一个视图时，一切正常（SelectorBase 和 SelectorA 构造函数按预期调用）

我找不到我做错了什么。

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

谢谢

【问题讨论】：

标签： aurelia

【解决方案1】：

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

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 {

【讨论】：