ng2-impress-dev 是一个基于 Angular2 的壮观演示库，用于构建交互性的 HTML 演示。本教程将为大家详细介绍如何使用该 npm 包。
安装
你可以使用 npm 安装 ng2-impress-dev：
npm install ng2-impress-dev --save
引入
在使用 ng2-impress-dev 前，需要在应用的模块中导入 Ng2ImpressModule：
import { Ng2ImpressModule } from 'ng2-impress-dev';
@NgModule({
imports: [Ng2ImpressModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }使用
添加 HTML
Add HTML that defines the impress presentation. This example uses very simple markup. 添加包裹演示主要元素的 HTML。以下为一个简单的示例：
-- -------------------- ---- -------
---- -------------
---- -----------------
---- ---------- -------------- ---------------
-----------------
------- --- --- ---------- ---- ---------------
----
-------- --- ----- --- ------------
--------- --- ------------
-----
------
---- --------------
-----------------
------- ----- ---------------
------
---- ----------------
---------- ---------
----------- ---- ---- -----------
------
------引用au-ng2-impressions组件
在应用中引入 Ng2ImpressComponent 组件，并添加以下代码：
<au-ng2-impressions [deskWidth]="500" [deskHeight]="500" > <!-- 插入上面定义的 HTML --> </au-ng2-impressions>
添加 CSS
ng2-impress-dev 提供了一些 CSS 类，可以为您的演示增加特定的样式。在示例中，CSS 文件位于 /node_modules/ng2-impress-dev/build/styles/impress-demo.css。在 Angular 的组件中使用下列代码即可添加相应的样式效果：
import 'ng2-impress-dev/build/styles/impress-demo.css';
现在，你的演示已准备好了！通过运行此命令，检查您的演示是否可以正常工作：
ng serve
演示控制
ng2-impress-dev 的用户界面十分简单。你只需按下向左或向右的箭头，即可驱动您的演示。还可以使用“ w”键进入演示概览模式。
结论
本文向大家介绍了如何使用 ng2-impress-dev 创建演示，并提供了相应的示例代码。ng2-impress-dev 具有强大的交互性和可重用性。希望这篇教程能够帮助到您。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdd2