我对 Aurelia 还比较陌生（大约 3 个月），所以可能会有更“专家”的答案，但你要做的是非常基本的。请记住，Aurelia 完全基于组件，以至于每个组件基本上都是页面上的一个元素。渲染“父”视图/控制器时，您的“子”视图/控制器只是该父页面上的元素。所以只需要渲染父页面并确保子页面链接正确即可。
路由器（在 app.js 中）：
configureRouter(config, router) {
this.router = router;
config.title = 'My Application Title';
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'homefolder/home' },
{ route: 'someparent', name: 'someparentnamefornamedroutes-optional', moduleId: 'someparentfolder/someparent' },
]);
}
父 ViewModel（在 someparentfolder/someparent.js 中）
// imports go here, like: import { inject } from 'aurelia-framework';
// injects go here, like: @inject(MyClass)
export class SomeParent {
child1 = {
fname: "Debbie",
lname: "Smith"
};
constructor() {
}
}
父视图（在 someparentfolder/someparent.html 中）
<template>
<require from="./child1"></require>
<require from="./child2"></require>
<h1>Some Parent Page Title</h1>
<h2>Child Component 1</h2>
<child-component-one linkeddata.bind="child1"></child-component-one>
<h2>Child Component 2</h2>
<child-component-two></child-component-two>
</template>
子 1 ViewModel（在 someparentfolder/child1.js 中）
import { inject, bindable, bindingMode } from 'aurelia-framework';
import { Core } from 'core';
@inject(Core)
export class ChildComponentOne { // use InitCaps, which will be translated to dash case by Aurelia for the element ref in SomeParent
@bindable({ defaultBindingMode: bindingMode.twoWay }) linkeddata;
constructor(core) {
this.core = core;
}
attached() {
// example calling core function
var response = this.core.myCustomFunction();
}
}
子 1 视图（在 someparentfolder/child1.html 中）
<template>
<h3>Hello, ${linkeddata.fname}</h3>
<p>Here's something from core: ${core.value1}</p>
</template>
（对 Child 2 ViewModel 和 View 使用相同的概念）
直接导航到子组件：
上述场景将每个子组件“嵌入”在 SomeParent 页面中。但是，如果您只想将每个子组件作为其自己的导航路由器视图打开（直接在您的主 <router-view></router-view> 内容窗口中打开），只需使用如下路由器定义：
configureRouter(config, router) {
this.router = router;
config.title = 'My Application Title';
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'homefolder/home' },
{ route: 'someparent', name: 'someparent', moduleId: 'someparentfolder/someparent' },
{ route: 'someparent/child1', name: 'child1', moduleId: 'someparentfolder/child1' },
{ route: 'someparent/child2', name: 'child2', moduleId: 'someparentfolder/child2' },
{ route: 'someparent/child3', name: 'child3', moduleId: 'someparentfolder/child3' }
]);
}
另一种情况：
也许您正在寻找的是一个 Singular 类，其中包含一个用于存储所有组件都将访问的状态和常用函数的公共位置。我通过创建一个名为core.js 的模型来实现这一点。我已经在上面添加了这些详细信息，您还可以在项目根 (/src) 文件夹中创建以下文件。
核心类（在 /src/core.js 中）：
// Some example imports to support the common class
import { inject, noView } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
import { I18N } from 'aurelia-i18n';
import { EventAggregator } from 'aurelia-event-aggregator';
@noView // this decorator is needed since there is no core.html
@inject(EventAggregator, I18N, HttpClient)
export class Core {
value1 = "Test data 1";
value2 = "Test data 2";
constructor(eventAggregator, i18n, httpClient) {
// store local handles
this.eventAggregator = eventAggregator;
this.i18n = i18n;
this.httpClient = httpClient;
}
myCustomFunction() {
// some code here, available to any component that has core.js injected
}
}
装订注意事项：
我为您提供了一个示例，说明如何使用 JavaScript 对象设置与子组件的双向绑定。 Aurelia 非常灵活，你可以用很多不同的方式来做这件事，但这似乎是相当标准的。如果您不需要孩子来操作 child1 中包含的数据，您可以删除 @bindable 装饰器上的括号注释，以便它只是 @bindable linkeddata;
您可以添加多个参数来链接多条数据，或者将它们分组到一个对象或数组中。
由于我还是一个相对较新的用户，我记得经历了所有这些。如果您有任何后续 cmets 或问题，请告诉我。
无论如何，如果有任何真正的专家在看这个，也请教我！ :-)