Question

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

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.在这种情况下导致错误的原因是什么？

由于

Answer 1

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

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

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

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

LongRunning

在旁注中，您应该从内部将AppComponent称为this.renderer.addClass(this.el.nativeElement, 'ui'); this.renderer.addClass(this.el.nativeElement, 'leftAlign');。

this

Answer 2

对我来说，导致此错误的原因是我的HTML中包含无效字符。这是由于代码完成错误而导致的，在该错误中我需要非绑定HTML属性，但是我的代码完成功能选择了带方括号的绑定代码。我以为我去掉了方括号，但是我错过了尾随的括号。

因为Angular编译HTML，所以您的模板作为字符串读入，因此“字符串包含无效字符”。而且堆栈跟踪毫无用处，因为它被深深地嵌入了HTML编译代码中，因此没有对我的文件的引用。

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

无效的字符错误角度

2 个答案: