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根目录中设置了这个：

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

在我的Angular View中，我将这些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的新组件，其视图为<template> <h1>Header</h1> </template>。这个html只是：

aurelia-component.html

然后，从<template> <require from="./test-component"></require> <div>${text}</div> <test-component></test-component> </template>我用它来调用它：

test-component

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

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

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

我也尝试在两个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');

这可以解释为什么当你想要它渲染模板时它会失败？

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

1 个答案: