最近我在开发一个基于 Ember.js 的 web 应用时，遇到了一个需要使用 flash message 的情况。在经过一番搜索后，我找到了一个非常好用的 npm 包：ember-flash-message-2000。在这篇文章中，我将向大家介绍如何使用这个包，并且分享一些我在使用中遇到的问题以及解决方法。
简介
ember-flash-message-2000 是一个 Ember.js 的插件，用于在应用中显示 flash message。它是一个轻量级的插件，且易于使用。
安装
首先，在项目的根目录下使用以下命令安装包：
npm install ember-flash-message-2000 --save-dev
接着，在 app.js 文件中添加以下代码：
import FlashMessageInitializer from 'ember-flash-message-2000/initializer'; Ember.Application.initializer(FlashMessageInitializer);
这里需要注意的是，如果你使用的是 Ember 2.x 或更高版本，你需要将上面的 import 改为：
import FlashMessageInitializer from 'ember-flash-message-2000/instance-initializer';
使用方法
在你的 Ember 组件中，你可以通过以下方式使用 flash message：
this.get('flashMessages').success('Your message here.');其中，'Your message here.' 即为要显示的消息。除了 success，你还可以使用 error、warning 和 info 来分别显示对应类型的消息。
在应用中显示 flash message 简直易如反掌。不过，有时你可能需要稍微复杂一些的配置，比如更改消息显示的位置等等。让我们看看这些高级用法。
高级配置
配置消息容器
默认情况下，消息会出现在页面的顶部。如果你想要将它们渲染在一个特定的容器中，则需要进行以下配置：
// 设置消息容器的选择器 ENV.flashMessageDefaults.messageComponent = 'flash-message'; // 设置消息容器的 class ENV.flashMessageDefaults.styleClasses = ['flash-message-container'];
这里，我们将消息渲染在一个名为 flash-message 的组件中，同时为该组件添加了一个 class，用于样式设置。
更改消息的显示时间
默认情况下，所有类型的消息都会在 3 秒后消失。如果你想要更改这个时间，可以进行以下配置：
ENV.flashMessageDefaults.timeout = 5000;
这段代码会将所有类型的消息的显示时间设置为 5000 毫秒。
在路由变化时清空消息
在路由变化时，很有可能你需要清除消息，以便用户在新的页面中不会看到旧的消息。你可以通过以下配置来实现这一点：
// 设置为 true 时，将在路由变化时清除消息。 ENV.flashMessageDefaults.clearOnRouteChange = true;
这里，我们将 clearOnRouteChange 设置为 true，这意味着在路由变化时会清除所有的消息。
问题与解决
在使用 ember-flash-message-2000 的过程中，我也遇到了一些问题，这里跟大家分享一下。
问题 1：消息未显示
在我刚开始使用插件时，我发现消息并没有在页面中显示出来。在与项目中其他人员讨论后，我们发现是因为该插件需要一个默认的消息容器才能正确工作。
解决方法：在 app.js 中添加以下代码：
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
----- -
---------
- - ------
------ ------- ------------------
----------- ------------------
------------------ -----------------
------------------ -
----------------------------
--
-------- -
-------------- -
------------------------------------ ------
-
-
---接着，更新我们之前的代码，将消息容器的选择器设为上述定义的组件：
ENV.flashMessageDefaults.messageComponent = 'flash-message-container';
问题 2：消息在路由变化时未清除
在我切换路由时，我发现旧的消息始终在页面中显示，造成了混乱。
解决方法：将 clearOnRouteChange 设置为 true，这样在路由变化时就会清除所有的消息：
ENV.flashMessageDefaults.clearOnRouteChange = true;
示例代码
最后，让我们看一下具体的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- --------------------
-------------- -----------------------
-------- -
------ -
-- ----
-- ---
-- ------
--------------------------------------- --------------
-
-
---以上就是关于 npm 包 ember-flash-message-2000 的使用教程。我们已经涵盖了从基础的使用到高级定制的各种情况。如果你还没有使用这个插件，我强烈建议你尝试一下，在你的应用中添加这个插件可以极大地提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca9a