Appel d'actions sur les collaborateurs de composants

Vous pouvez appeler des actions sur les collaborateurs du composant directement à partir du modèle.

Syntaxe

import Ember from 'ember';

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

Exemple

L'exemple donné ci-dessous spécifie l'appel d'actions sur les collaborateurs du composant directement à partir du modèle dans votre application. Créez un composant avec le nom ember-actions et ouvrez le fichier de modèle de composant ember-actions.js créé sous app / components / avec le code suivant -

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);
      }
   }
});

Créez un service, qui peut être mis à disposition dans les différentes parties de l'application. Utilisez la commande suivante pour créer le service -

ember generate service emberactionmessage

Ouvrez maintenant le fichier de service emberactionmessage.js , qui est créé sous app / services / avec le code suivant -

import Ember from 'ember';

export default Ember.Service.extend ({
   isAuthenticated: true,
   thisistest: function () {
      return "Welcome to Tutorialspoint";
   }
});

Créez ensuite un initialiseur, qui configure l'application au démarrage. L'initialiseur peut être créé à l'aide de la commande suivante -

ember generate initializer init

Ouvrez le fichier d'initialisation init.js , qui est créé sous app / initializers / avec le code suivant -

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

export default {
   name: 'init',
   initialize: initialize
};

Ouvrez le fichier ember-actions.hbs créé sous app / templates / components / et entrez le code suivant -

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

Créez le fichier application.hbs et ajoutez le code suivant -

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

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Cliquez ensuite sur le bouton, il affichera le texte de la page de service comme indiqué dans la capture d'écran ci-dessous -