我会使用 Typedjs 在 Angular 2 中制作打字机效果
如 site 所示页面,我已经用 npm 安装了包:
npm install typed.js
然后我将这段代码添加到我的组件中:
import Typed from 'typed.js';// not sure if it's the right way
和
ngOnInit() {
var typed = new Typed(".element", {
strings: ["This is a JavaScript library", "This is an ES6 module"],
smartBackspace: true // Default value
});
}
然后在我的 html 文件中:
<div id="typed-strings">
<p>Typed.js is an <strong>Awesome</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
我收到这个错误:
/home/haddad/projects/siteperso/src/app/slide-presentation/slide-presentation.component.ts (18,21):找不到名称“Typed”。
PS:我对任何其他与 Typed.js 做同样工作并使用 Angular 2/4 的提议持开放态度
最佳答案
在你的项目中安装 typed.js 包
npm install typed.js --save
在您的 component.ts 文件中导入 typed.js
import Typed from 'typed.js';
在 component.ts 的 ngOnInit() 中添加这段代码
const options = {
strings: ['Innovation.', 'Discovery.'],
typeSpeed: 100,
backSpeed: 100,
showCursor: true,
cursorChar: '|',
loop: true
};
const typed = new Typed('.typed-element', options);
创建 html 元素以呈现 typed.js 的输出
<span class="typed-element">Fsfsfsfsfs</span>
请引用https://github.com/vishalhulawale/angular/tree/master/integrations/typedJS
关于javascript - 如何将 Typed.js 与 Angular 2 集成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45085213/