Aurelia Typescript 和 DI

Question

我运行遇到一个问题，我希望对象（示例中的申请人）引用相同，但在此示例中没有得到预期的行为，如果有人可以指出我，那就太好了正确的方向。

app.ts:

@inject(HttpClient, Applicant)
export class App {
    applicant: Applicant;
    http: HttpClient;
    router: Router;

    constructor(httpClient, applicant) {
        this.applicant = applicant;
        this.http = httpClient;
        this.applicant.firstName = "John";
    }
//router config code..
updateApplicant() {
    this.http.get("/fakeApplicant.json")
        .then(response => {
            this.applicant = response.content; //Sets first name to Mike
        });
}

start.ts

@inject(Applicant)
export class start {
    router: Router;
    applicant: Applicant;

    constructor(applicant : Applicant) {
        this.applicant = applicant;
    }

app.html

<template>
<div class="container">
    <div class="appHost">
        <router-view></router-view>
    </div>

    <button click.delegate="updateApplicant()">Update First Name</button>

    <h3>App First Name: ${applicant.firstName}</h3>
</div>

start.html

<template>
<h1>Start</h1>

<h3>Start First Name: ${applicant.firstName}</h3>
</template>

好的，所以上面应该很简单，我有主应用程序，start.html 只是一个将在路由器视图中启动时加载的路由。正如预期的那样，App 和 Start First Name 绑定最初都显示为 John。但是，当我单击执行 http get 调用的 updateApplicant 委托时，只有 App First Name 绑定更新为 Mike，我希望 Start 视图的申请人也被更新，因为它们应该引用相同的 Applicant 对象，对吧？我是 Aurelia 的新手，不确定我使用 DI 注入申请人以在不同视图中使用的方式是否正确，我希望申请人对象是单身人士并希望注入不同的视图在应用程序中。我最初认为这是一个 ts 词法范围问题，但这意味着什么都不应该更新。

Answer 1

行为

不，你不是。由于JS变量只是对内存中对象的引用，所以你的变量applicant只是一个引用，当你在函数updateApplican中更改它时，你只需将引用更改为另一个 内存中的对象。这意味着 start 视图中的引用 仍然引用 旧视图。

解决方案

只有一招。您可以将 Aplicant 存储在包装器中。它看起来像下面

 //make it also singleton
 class AplicantWrapper {
       aplicant: Aplicant;
 }

然后将其注入您的视图

@inject(HttpClient, ApplicantWrapper)
export class App {
applicantWraper: ApplicantWrapper;
http: HttpClient;
router: Router;

constructor(httpClient, applicant) {
    this.applicantWraper = applicant;
    this.http = httpClient;
    this.applicant.firstName = "John";
}
   //router config code..
 updateApplicant() {
      this.http.get("/fakeApplicant.json")
          .then(response => {
                this.applicantWrapper.applicant = response.content; //Sets first name to Mike
          });
  }

在这种情况下，两个视图都会发生变化，因为它仍然引用相同的包装器对象

Aurelia Typescript 和 DI

Aurelia Typescript and DI

typescript

aurelia

行为

解决方案