<require> 在 Aurelia 中使用增强调用的 globalResource 组件中

Question

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

所以，在我的 Aurelia 文件夹中，我创建了一个包含两个组件的组件文件夹（aurelia-component.js 和 another-component.js 及其视图 aurelia-component.html 和 another-component.html），我不会放 javascript，因为它们只是两个类使用一个属性，两者的 html 是相同的，唯一改变的是 text 属性值，所以我可以区分它们：

<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.directive('aureliaContainer', require('./directives/aurelia.container'));

在我的 Angular 视图中，这些 div 带有我的指令，从 Aurelia 调用 enhance 函数：

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

我在 html 中有两个 aurelia-container 的原因是我知道在迁移应用程序时我必须有多个。 这很好用，两个组件都在屏幕上正常加载。 问题是当我尝试从其中一个组件中调用另一个组件时。 我所做的是，我创建了一个名为test-component.js 的新组件，其视图为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 实际加载，但 aurelia-component 的 <div>${text}</div 部分没有加载，我在控制台中收到此错误：

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

我真的不明白为什么会发生这个错误，我应该能够正常从另一个元素中加载自定义元素，不是吗。或者你使用enhance 时有限制吗？

我还尝试在两个 div 中使用 setRoot，但没有成功，只加载了其中一个。

也许有更好的方法来解决这个问题？ 同样，我不能一次迁移整个应用程序，这是不可行的。

提前感谢您的帮助。

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');

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