无效字符错误角度答案

【问题标题】：Invalid Character Error Angular无效字符错误角度
【发布时间】：2017-12-20 02:30:26
【问题描述】：

我在尝试使用自定义属性指令编译 Angular 组件时收到 ERROR DOMException [InvalidCharacterError: "String contains an invalid character" code: 5 nsresult: 0x80530005 location: http://localhost:4200/vendor.bundle.js:67608]。我的 AppComponent、指令和基本模板的代码如下：

leftAlign.directive.ts

import {
  Directive,
  HostListener,
  HostBinding,
  Input,
  Output,
  ElementRef,
  Renderer2 // for host class binding
 } from '@angular/core';

@Directive({
  selector: '[leftAlign]'
})
export class LeftAlignDirective {

  public constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {
    this.renderer.addClass(this.el.nativeElement, 'ui leftAlign');
  }
}

app.component.ts

import { Component } from '@angular/core';
import { LeftAlignDirective } from './Directives/left-align.directive';


@Component({
  selector: `app-root`,
  templateUrl: './app.component.html'
})
export class AppComponent {
  public static SemanticUiBaseDir = '../../semantic/dist/';
  public getSemanticeUiBaseDir() : string{
    return AppComponent.SemanticUiBaseDir;
  }
  public constructor() {}
}

app.component.html

!--
  @ semantic-ui.min.css
-->
<link rel="stylesheet" type="text/css" href="/home/zerocool/km-live/FrontEndComponent/semantic/dist/semantic.css">

<!--
  @ @semantic.min.js
-->
<script src="./home/zerocool/km-live/FrontEndComponent/semantic/semantic.js"></script>

<p leftAlign>This should be aligned left!</p>

我有兴趣了解以下内容： 1. 是什么导致了这样的错误？ 2. 本案例中的错误是什么原因造成的？

谢谢

【问题讨论】：

标签： angular typescript domexception

【解决方案1】：

问题是addClass中的空格，不允许。

当我尝试这样做时，我得到了一个更具描述性的错误

错误 DOMException: 无法在 'DOMTokenList' 上执行 'add': 提供的令牌 ('ui leftAlign') 包含 HTML 空格字符，这些字符在令牌中无效。

您需要单独添加这两个类。

this.renderer.addClass(this.el.nativeElement, 'ui');
this.renderer.addClass(this.el.nativeElement, 'leftAlign');

顺便说一句，您应该从内部将 AppComponent 称为 this。

export class AppComponent {
  public static SemanticUiBaseDir = '../../semantic/dist/';
  public getSemanticeUiBaseDir() : string{
    return this.SemanticUiBaseDir; // I changed AppComponent to this here
  }
  public constructor() {}
}

【讨论】：

我尝试了这个解决方案，它奏效了。还有一个问题：是否允许使用'this'调用静态方法或调用静态属性？我的理解是静态成员应该使用类名而不是'this'来引用。
是的，没错，您没有像这样引用静态成员，我错过了您将其设为静态。
如果你正在做类似[ngClass]="['myclass',addclass]" 的事情并且addclass 被定义为@Input() addclass = ''; 也会造成麻烦。在这种情况下，使用任何不存在的类 @Input() addclass = 'xxxxxxx'; 来防止该错误。

【解决方案2】：

对我来说，导致此错误的原因是我的 HTML 中有无效字符。这是由于代码完成错误引起的，我想要非绑定的 HTML 属性，但我的代码完成选择了带方括号的绑定属性。我以为我删除了方括号，但我错过了尾随的一个。

因为 Angular 编译 HTML，你的模板被作为字符串读入，因此“字符串包含无效字符”。而且堆栈跟踪毫无价值，因为它被深深地捕获在 HTML 编译代码中，因此没有对我的文件的引用。

因此，如果您收到此错误并且堆栈跟踪不包含您的任何文件，但引用了名称中带有“HTML”的类，则您需要搜索您的 HTML。希望您的编辑器对 HTML 有一些错误突出显示，但如果没有，请开始注释掉您的 HTML 的大块，直到您确定它在哪个块中，然后从那里居中。我花了一点时间才找到那个不应该出现的狭窄的小方括号。

【讨论】：