在<Aurelia中使用Enhance调用的globalResource组件内的<require>

Question

所以,我正在尝试在我的Angular 1 Web应用程序中设置Aurelia,以便我可以慢慢升级.我需要这样做,因为应用程序太大并且一次迁移所有内容是不可能的.

所以,在我的Aurelia文件夹中,我创建了一个包含两个组件的组件文件夹(aurelia-component.js以及another-component.js它们的视图aurelia-component.html和another-component.html),我不会把它放在javascript中,因为它们只是两个带有一个属性的类,两者的html是相同的,唯一的东西更改是文本属性值,因此我可以区分它们:

<template>
    <div>${text}</div>
</template>

我的切入点main.js如下:

export function configure(aurelia) {
    aurelia.use
        .basicConfiguration()
        .developmentLogging()
        .globalResources('components/aurelia-component')
        .globalResources('components/another-component');

        //window.aurelia = aurelia;
     aurelia.start()
        .then(a => { 
            window.aurelia = a;
        });
}

正如你所看到的,这将Aurelia放在窗口对象中,所以我可以从我的Angular应用程序访问它,我稍后会对此进行改进.在我的角度应用程序中,我有这个指令:

'use strict';

function AureliaContainer() {
    function Link($scope, element, attrs) {
        window.aurelia.enhance(element[0]);
    }
    //
    return {
        restrict: 'A',
        link: Link
    };
}

module.exports = AureliaContainer;

我在我的app root中设置了这个:

app.directive('aureliaContainer', require('./directives/aurelia.container'));

在我的Angular View中,我有这些div与我的指令调用enhanceAurelia中的函数:

<div aurelia-container>
    <aurelia-component></aurelia-component>
</div>
<div aurelia-container>
    <another-component></another-component>
</div>

我aurelia-container在html中有两个的原因是我知道在迁移应用程序时我必须有多个.这样工作正常,两个组件在屏幕上正常加载.问题是当我尝试从其中一个组件中调用另一个组件时.我做的是,我创建了一个名为test-component.jswith view 的新组件test-component.html.这个html只是:

<template>
    <h1>Header</h1>
</template>

然后,从aurelia-component.html我用它调用它:

<template>
    <require from="./test-component"></require>
    <div>${text}</div>
    <test-component></test-component>
</template>

现在,当我加载页面时,test-component实际加载但<div>${text}</div部分aurelia-component没有,我在控制台中收到此错误:

Uncaught (in promise) TypeError: Cannot read property 'behaviorInstructions' of undefined

我真的不明白为什么会发生这种错误,我应该能够从另一个中加载一个自定义元素,不应该是I.或者你使用时是否存在限制enhance？

我也尝试setRoot在两个div中使用但没有成功,只加载了其中一个.

也许有更好的方法呢？同样,我不能立刻迁移我的整个应用程序,这是不可行的.

在此先感谢您的帮助.

Answer 1

首先，我对 Aurelia 的渐进增强一无所知。并且无法评论其是否适合您的场景。

但我想知道您是否错过了一些 Au 依赖项（例如绑定或模板？）

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8

aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .globalResources('resources/my-component');

这也许可以解释为什么当您希望它渲染模板时它会失败？