在组件协作者上调用操作（Invoking Actions on Component Collaborators）

优质

小牛编辑

130浏览

2023-12-01

您可以直接从模板调用组件协作者上的操作。

语法 (Syntax)

import Ember from 'ember';
export default Ember.Component.extend ({
   target_attribute: Ember.inject.service(),
   // code for component implementation
});

例子 (Example)

下面给出的示例指定直接从应用程序中的模板调用组件协作者的操作。使用名称ember-actions创建一个组件，并使用以下代码打开在app/components/下创建的组件模板文件ember-actions.js -

import Ember from 'ember';
var inject = Ember.inject;
export default Ember.Component.extend ({
   message: inject.service(),
   text: 'This is test file',
   actions: {
      pressMe: function () {
         var testText = this.get('start').thisistest();
         this.set('text', testText);
      }
   }
});

创建一个服务，该服务可以在应用程序的不同部分中使用。使用以下命令创建服务 -

ember generate service emberactionmessage

现在打开emberactionmessage.js服务文件，该文件在app/services/下创建，代码如下 -

import Ember from 'ember';
export default Ember.Service.extend ({
   isAuthenticated: true,
   thisistest: function () {
      return "Welcome to xnip";
   }
});

接下来创建一个初始化程序，在启动时配置应用程序。可以使用以下命令创建初始化程序 -

ember generate initializer init

打开init.js初始化文件，该文件在app/initializers/下创建，代码如下 -

export function initialize(app) {
   app.inject('component', 'start', 'service:emberactionmessage');
}
export default {
   name: 'init',
   initialize: initialize
};

打开在app/templates/components/下创建的ember-actions.hbs文件，然后输入以下代码 -

<button {{action "pressMe"}}>Click here to see the text</button><br>  
<h4>{{text}}</h4>
{{yield}}

创建application.hbs文件并添加以下代码 -

{{ember-actions}}
{{outlet}}

输出 (Output)

运行ember服务器; 你会收到以下输出 -

接下来点击按钮，它将显示服务页面中的文本，如下面的屏幕截图所示 -