错误类型错误：使用 Typedjs 时无法读取 null 的属性“tagName”答案

【问题标题】：ERROR TypeError: Cannot read property 'tagName' of null when using Typedjs错误类型错误：使用 Typedjs 时无法读取 null 的属性“tagName”
【发布时间】：2018-03-11 20:57:25
【问题描述】：

我会使用 TypedJS 库。

我已经使用npm install typed.js 安装了它然后在 .angular-cli.json 中包含 typed.js 文件

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/typed.js/lib/typed.js"
],

在我的组件中：

import { Component, OnInit } from '@angular/core';
import * as Typed from 'typed.js';

@Component({
  selector: 'app-a-propos',
  templateUrl: './a-propos.component.html',
  styleUrls: ['./a-propos.component.css']
})
export class AProposComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var typed2 = new Typed('#typed', {
      strings: ["<b>#Font End ?</b>", "<b>#Front End ?</b>", "<b>#Back End ?</b>", "<b> #Fullstack ?</b>", "<b>ça m'interesse !</b>"],
      typeSpeed: 30,
      backDelay: 2000,
      loop: true,

    });
  }
}

HTML

<p id="typed"> </p>

我得到这个错误：

ERROR TypeError: Cannot read property 'tagName' of null

【问题讨论】：

类型库期望选择器是标记名而不是我相信的 id。
试图将 'tagName' 添加到 html 但不起作用
您不需要将 tagName 添加到 HTML 中，它已经是 tagName。在您的情况下， tagName 将是 'p'

标签： javascript html angular typedjs

【解决方案1】：

您需要在视图初始化后设置 Typed 对象。

export class AProposComponent implements AfterViewInit{

  constructor() { }

  ngAfterViewInit() {
    var typed2 = new Typed('#typed', {
      strings: ["<b>#Font End ?</b>", "<b>#Front End ?</b>", "<b>#Back End ?</b>", "<b> #Fullstack ?</b>", "<b>ça m'interesse !</b>"],
      typeSpeed: 30,
      backDelay: 2000,
      loop: true,

    });
  }
}

【讨论】：