将变量值从 js 文件传递​​给 hbs 组件

Question

嗨，我在 js 文件中有一个全局变量，我想在 hbs 文件中检索该变量的值

    export default () => {
    selectedViolationTypeId: 0,
    addProgram(program) {
         this.set('selectedViolationTypeId', program.ViolationTypeId);
     },
    }

selectedViolationTypeId 的值在 addProgram 函数调用中更改，我想在 hbs 文件中检索的更改值在 URL 字段中如下所示： url='api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}'

 <div class="col-md-8">
                    {{log 'selectedViolationTypeId'}}
                    {{log selectedViolationTypeId}}
                        <div class="form-group chosen-fix {{if failTest 'has-error q'}}">
                            <label class="control-label">Inspection Item Categories</label>
                            {{#drop-down url='api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}'
                            id='idInspectionItemCategories'
                            required=false
                            placeholder='Add Program (Search)'
                            showSelected=false f=f as |item|
                            }}
                            {{log 'item 1'}}
                            {{log item}}
                            {{#if item}}
                            {{partial 'components/edit-item/partial-select1'}}
                            {{else}}
                            <i>Nothing Here</i>
                            {{/if}}
                            {{/drop-down}}
                        </div>
                    </div>

但它没有发生，在 url 字段中，这个选定的值是空的，错误消息如下

:56974/api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}}:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
api.js:77 api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}} error undefined Object

有人可以帮助我如何在前端 hbs 文件中检索它的值吗？

Answer 1

您可以通过在组件/控制器中定义属性来使全局变量值在 hbs 模板中可见。 因此，在您的组件代码中，定义一个 getter：

import Component from '@glimmer/component';

export default class MyComponent extends Component {
  get violationTypeId() {
    return selectedViolationTypeId;
  }
}

现在你可以在模板中使用它：

{{log this.violationTypeId}}

PS 您可以通过服务使用此全局变量。 如果值在逻辑上属于现有服务，则将其添加到现有服务中，或者创建一个新服务：

import Service from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class MyService extends Service {
  @tracked selectedViolationTypeId = DEFAULT_VALUE;

  @action addProgram(program) {
    this.selectedViolationTypeId = program?.ViolationTypeId;
  }
}

然后，您可以将此服务注入到您的组件/控制器中：

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class MyComponent extends Component {
  @service myService;
}

并使用模板中的值：

{{log this.myService.selectedViolationTypeId}}