Hi,
I am trying to use internationalized messages for flash messages on my components. I am doing it like this:
import { t } from 'ember-intl';
export default Component.extend({
/**
* Toast like messages
*/
flashMessages: service(),
actions: {
/**
*
* @return {Promise<void>}
*/
async move() {
this.flashMessages.clearMessages();
try {
set(this, 'isSaving', true);
await this.selectedTargetPublisher.move({
sourceId: this.selectedSourcePublisher.get('id')
});
this.flashMessages.success(`${t('admin.toasts.unification')}`, { sticky: true });
set(this, 'isSaving', true);
} catch (e) {
this.flashMessages.alert(e, { sticky: true });
throw new Error(e);
}
}
}
});
But it throws an error Only one computed property decorator can be applied to a class field or accessor, but
and so no message is printed on the toast message:
function COMPUTED_DECORATOR(target, key, propertyDesc, maybeMeta, isClassicDecorator$$1) {
true && !(true
/* EMBER_NATIVE_DECORATOR_SUPPORT */
|| isClassicDecorator$$1) && (0, _debug.assert)('Native decorators are not enabled without the EMBER_NATIVE_DECORATOR_SUPPORT flag', true || isClassicDecorator$$1);
true && !(isClassicDecorator$$1 || !propertyDesc || !propertyDesc.get || propertyDesc.get.toString().indexOf('CPGETTER_FUNCTION') === -1) && (0, _debug.assert)("Only one computed property decorator can be applied to a class field or accessor, but '" + key + "' was decorated twice. You may have added the decorator to both a getter and setter, which is unecessary.", isClassicDecorator$$1 || !propertyDesc || !propertyDesc.get || propertyDesc.get.toString().indexOf('CPGETTER_FUNCTION') === -1);
let meta$$1 = arguments.length === 3 ? (0, _meta2.meta)(target) : maybeMeta;
desc.setup(target, key, propertyDesc, meta$$1);
let computedDesc = {
enumerable: desc.enumerable,
configurable: desc.configurable,
get: DESCRIPTOR_GETTER_FUNCTION(key, desc)
};
if (false
/* EMBER_METAL_TRACKED_PROPERTIES */
) {
computedDesc.set = DESCRIPTOR_SETTER_FUNCTION(key, desc);
}
return computedDesc;
}
I’ve tried several alternatives like storing the internationalized text in a variable (const
and let
) but getting the same result every time.
Thanks a lot
Edit
It must be done importing the intl
service:
flashMessages: service(),
intl: service(),
actions: {
save() {
this.flashMessages.success(this.intl.t('translation.key'));
}
}