简介
Angular-meteor-initializer是一个NPM包，它提供了一种方式将Angular指令与Meteor数据绑定起来。它使得开发者可以更加方便地在Angular应用中使用Meteor框架的实时数据功能。
安装
首先需要在Angular项目中安装angular-meteor和meteor-client-side包：
npm install --save angular-meteor meteor-client-side
然后使用下面的命令安装angular-meteor-initializer包：
npm install --save angular-meteor-initializer
使用
为了使用angular-meteor-initializer，需要首先将其添加到Angular应用的依赖中。方法如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------- - ---- -----------------------------
-----------
-------- -
---------------
--
--
------ ----- --------- --然后就可以在Angular组件中使用angular-meteor-initializer提供的指令了。例如下面的组件将在页面上显示一个实时更新的Meteor collection：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- ---------------
------ - --------- - ---- -----------------------------
------------
--------- ---------------
--------- -
---- ----------- ---- -- ---------------------------
--
--
------ ----- ----------- -
------ ------------------
------------------- ---------- ---------- -
---------- - -----------------------------
-
-在上面代码中，Initialer服务从angular-meteor-initializer中获取。通过使用这个服务，我们可以在Angular应用中调用Meteor的pub/sub API。 我们调用了subscribe方法来获取一个指向Meteor collection的游标。当该游标中的数据发生变化时，Angular组件会自动更新视图。
示例
为了更好地理解angular-meteor-initializer，下面是一个简单的示例。
首先创建一个新的Meteor项目，并创建一个Items集合。 安装Angular和angular-meteor-initializer：
meteor create myapp cd myapp meteor add angular meteor add angular-meteor meteor add mongo npm install --save angular-meteor-initializer
然后创建一个Angular组件（在client/imports目录下的app.ts文件）：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- ---------------
------ - --------- - ---- -----------------------------
------------
--------- ---------
--------- -
---- ----------- ---- -- ---------------------------
--
--
------ ----- ------------ -
------ ------------------
------------------- ---------- ---------- -
---------- - -----------------------------
-
-这个组件会从Meteor中获取一个名为“items”的collection，并在页面上展示collection中的title字段。 接下来创建一个模块文件（在client/imports目录下的app.module.ts）：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- - ---- ----------------------------- ------ - ------------ - ---- -------- ----------- -------- --------------- ----------------- ------------- --------------- ---------- --------------- -- ------ ----- --------- --
最后，在client/main.ts中引入该模块并启动应用：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './imports/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);现在你可以运行meteor run并前往http://localhost:3000，查看你的应用。
注意事项
当使用angular-meteor-initializer时，需要注意一些事项。
Angular-meteor-initializer依赖于“meteor-client-side”库。如果未正确安装该库，则会出现找不到类'Accounts'的错误。要解决此错误，请使用以下命令安装相应的npm包：npm install @types/meteor --save-dev
在使用Angular-meteor-initializer指令时，需要注意Angular变更检测所带来的影响。如果你的应用中的Meteor实时数据未正确更新，请尝试调用zone.run：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- ---------------
------ - --------- - ---- -----------------------------
------------
--------- ---------------
--------- -
---- ----------- ---- -- ---------------------------
--
--
------ ----- ----------- -
------ ------------------
------------------- ---------- ---------- ------- ----- ------- -
---------- - -----------------------------
-------------------- -- -
---------------- -- -
---------- - -----------------------------
---
---
-
-这里，我们使用initialer.autorun来订阅Meteor实时数据，在变化发生时手动更新Angular组件。
结论
Angular-meteor-initializer提供了一种简单而强大的使用Meteor实时数据功能的方式。 使用这个工具，我们可以更快地构建具有实时数据功能的Angular应用， 提高我们的开发效率。 需要注意的是，我们需要了解Angular变更检测所带来的影响，并进行相应的调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc1d9