无效字符错误 Angular

Question

尝试使用自定义属性指令编译 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、本例错误是什么原因造成的？

谢谢

Answer 1

问题是addClass中的space，不允许。

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

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('ui leftAlign') contains HTML space characters, which are not valid in tokens.

您需要单独添加两个类。

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() {}
}

Answer 2

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

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

因此，如果您遇到此错误并且堆栈跟踪包括 none 个文件，但引用名称中带有“HTML”的类，则您需要继续搜索通过你的 HTML。希望你的编辑器有一些关于 HTML 的错误突出显示，但如果没有，就开始注释掉你的 HTML 的大块，直到你弄清楚它在哪个块，然后从 center-in那里。我花了一点时间才找到那个不应该出现的狭窄的小方括号。

无效字符错误 Angular

Invalid Character Error Angular

domexception

typescript

angular