无效字符误差角

Question

在尝试使用自定义属性指令编译角组件时，我将获得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中的空间是不允许的。

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

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

Answer 2

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

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

因此，如果您收到此错误，并且堆栈跟踪没有包含任何文件，而是引用名称中有" HTML“的类，则需要在HTML中进行搜索。希望您的编辑器在HTML中有一些突出显示错误，但是如果没有，那么就开始注释掉大量HTML，直到您找出它在哪个块中，然后从那里开始居中。我的眼睛花了一小段时间才找到那个狭小的方框，它不应该在那里。