Question

我有一个使用自定义组件的html文件。自定义组件伸出并获取bind（）方法的数据。因此，当组件绑定时，它会获取数据并相应地设置属性。该组件还有一个Save（）方法，在调用时，应该将对象提交给数据库。

现在，在我的外部html文件中，我已导入此自定义组件。所以我有自定义组件，然后我有一个提交按钮（不是自定义组件的一部分），如下所示：

<custom-component></custom-component>
<button click.trigger="submitCustomComponentData()"></button>

我在自定义组件视图中没有按钮的原因是因为该视图并不总是具有相同的按钮，这使得组件不可扩展。

submitCustomComponentData()方法基本上调用组件VM中的更新方法。

现在，当页面加载时，一切都运行完美。数据被拉入，我的所有输入都预先填充了以前的数据（来自数据库）。一切都很棒。但是，当我调用submitCustomComponentData()方法（或单击按钮）时，我收到错误，因为没有填充对象。这就像我正在失去实例或其他东西。

以下是一些重要部分的摘要：

这是我的外部html文件的样子。它由自定义组件组成。

<template>
    <require from="resources/components/dispatch-questions/dispatch-questions"></require>

<section class="pages au-animate">
    <div class="row" id="dispatch-questions">
        <dispatch-questions></dispatch-questions>
    </div>
</section>

</template>

为此虚拟机注入了dispatch-questions组件，如下所示：

constructor(private router: Router, private dq: DispatchQuestions) {
    }

它还有一个click.trigger方法，该方法应该调用组件中的updateDB方法。此时，组件（应该已经在bind（）上创建了相同的实例）应该将该对象提交给DB。

但是我收到错误，因为某些原因，该对象是空的。组件中的函数是抓取this.myObject并将其提交给数据库。我想当我从外部VM（而不是组件VM）调用更新函数时，我正在丢失组件的this实例。我认为这就是问题。如果这是问题，我们不确定如何解决它。任何帮助都会很棒！

我试图在Gist上创建一个简单的版本。 https://gist.run/?id=f07b2eaae9bec27acda296189585ea6c

Answer 1

有in the documentation的解释。

Aurelia DI使用的一般规则

一切都是应用程序级单例，除了那些被归类为“组件”的东西，基本上是自定义元素，自定义属性和通过路由器或合成引擎创建的视图模型。您可以通过显式配置更改路由器和组合创建组件的生命周期。

我建议使用EventAggregator而不是注射。这种方法确保了灵活性，可扩展性并防止了紧耦合。

关于EventAggregator：#1 Walkthrough by Dwayne Charrington，Documentation，Contact Manager Tutorial。

以下是根据您的方案展示它的要点：https://gist.run/?id=f66eaa12e4183a72a7a3cc01ce3a8fb5

<强> app.js

假设我们想要使用Component个自定义组件的多个实例。为此，我们可以发布带有关联数据的component:save事件。

import { inject } from "aurelia-framework";
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {

  components = [
    { id: 1, name: 'Component #' },
    { id: 2, name: 'Component #' },
    { id: 3, name: 'Component #' }
  ];

  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  SubmitData(opts) {
    this.eventAggregator.publish('component:save', opts);
  }

  // ...
}

<强> component.js

在这里，我们可以订阅component:save个事件并检查是否应该继续保存。因此，每个Component实例都应具有唯一标识（数字，哈希，uid等）。

注意： detached方法中有一个重要的清理部分，官方文档中没有明确提及。这就是为什么我首先列出了Dwayne Charrington的博客文章。

import { inject, bindable } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Component {

  @bindable
  id;

  object = {};

  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  bind() {
    this.object = {
      "Name": `My name ${this.id}`,
      "Age": 21
    };

    console.log(`component ADDED: #${this.id}`);

    this.subscriber = this.eventAggregator.subscribe('component:save', data => {

      if (data.id === this.id || data.all === true) {
        this.SubmitObjectToDatabase();
        console.log(`component:save SAVED: #${this.id}`, this.object.Name);
      } else {
        console.log(`component:save PASSED: #${this.id}`);
      }

    });
  }

  SubmitObjectToDatabase() {
    console.log(`SubmitObjectToDatabase has been called: #${this.id}`);
  }

  detached() {
    // cleanup
    this.subscriber.dispose();
    console.log(`component REMOVED: #${this.id}`);
  }
}

访问自定义组件数据/方法

1 个答案: