Angular 无效字符错误

我收到

错误DomeException[InvalidCharacterError:“字符串包含无效字符”
代码：5
nsresult:0x80530005
地点：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>

--
@语义-ui.min.css
-->
这应该是左对齐

我有兴趣了解以下内容： 1.是什么导致了这样的错误？ 2.在这种情况下，是什么导致了错误

---

谢谢

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

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

错误DOMEException:未能对“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() {}
}

---

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

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

---

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

我尝试了这个解决方案，它成功了。还有一个问题：是否允许使用“this”调用静态方法或静态属性？我的理解是，静态成员应该使用类名而不是“this”来引用。是的，这是正确的，您没有这样引用静态成员，我错过了您将其设置为静态的消息。如果您正在执行类似于

[ngClass]=“['myclass'，addclass]”的操作，

并且addclass被定义为

@Input（）addclass=”@Input（）addclass='xxxxxxx'以防止该错误。