angular - 无效字符错误 Angular

Question

我得到 ERROR DOMException [InvalidCharacterError: "String contains an invalid character"
代码:5
nsresult: 0x80530005
location: http://localhost:4200/vendor.bundle.js:67608] 尝试使用自定义属性指令编译 Angular 组件时。我的 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');
  }
}

应用程序组件.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中的空格，不允许。

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

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