Aurelia-compose视图

我对这个框架完全陌生。通过阅读所有文档，我成功地使用VisualStudio和键入脚本配置了Aurelia框架。 我想知道如何在另一个视图中组合视图，并从其父视图初始化其视图模型

例如： 在导航框架中，我们有一个视图作为欢迎视图，显示名字和带有提交按钮的第二个名字。 现在，我创建了一个路由名称，将其命名为MyApp，我想组成欢迎视图，并将第一个名称和第二个名称传递给它的视图模型

请告诉我怎么做？ 这是我的Html MyApp的外观：

<template>
    <import from='welcome'></import>
    <section class="au-animate">       
      <compose view-model="welcome"></compose>
    </section>
</template>

这是欢迎视图的视图模型：

import {computedFrom} from 'aurelia-framework';

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';
  previousValue = this.fullName;

  constructor(fname: string, lname: string) {
      if (fname != null || lname != null) {
          this.firstName = fname;
          this.lastName = lname;
      }
  }
}

---

我认为您的代码中存在一些问题-

您需要修复myApp的title属性的语法

按照惯例，你应该把你的类命名为PascalCase

目前无法使用标准HTML导入，如果需要自定义元素，则需要使用

require

要组合视图，可以使用两种方法-

组合自定义元素（需要而不是必需）

不知道为什么没有反勾号就无法显示

作为自定义元素

<template>
    <require from='welcome'></require>
    <section class="au-animate">       
      <welcome></welcome>
    </section>
</template>

 <template>
     <section class="au-animate">       
       <compose view-model="./welcome"></compose>
     </section>
 </template>

<template>
    <require from='welcome'></require>
    <section class="au-animate">       
      <welcome></welcome>
    </section>
</template>