Невозможно указать пробел в качестве значения в свойстве Input в Angular6.

Question

Я пытаюсь создать общие элементы управления, подобные этому

динамические-control.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ngo-button',
  template: `<button [ngClass]=class type={{type}}>{{message}}</button>`,
  styles: [`.one{border:solid 2px yellow} .two{background-color:pink} .three{
  background-color: blue;
}`]
})
export class HelloComponent  {
   @Input() type: string = 'button';
  @Input() class: string = 'one three';
  @Input() message: string = 'submit';
}

главный-component.html

<ngo-button [class]='btn two' (click)='somefunc()'></ngo-button>

Теперь я хочу передать два класса кнопке, но когда я пытаюсь передать это таким образом, я получаю сообщение об ошибке

[class] = 'btn two'

Полагаю, нам не разрешено добавлять пробел во входном параметре, есть ли другой способ его реализации?

это ссылка на стек

Answer 1

<ngo-button [class]="'btn two'" (click)='somefunc()'></ngo-button>

Синтаксис по умолчанию для Angular. Вы должны указать строку в кавычках, если используете нотацию [input].

В противном случае:

<ngo-button class="btn two" (click)='somefunc()'></ngo-button>

Хотя я должен сказать, что на самом деле не понимаю, почему вы используете входные данные для предоставления классов вашего компонента.

Answer 2

Вы можете использовать [ngClass]

<ngo-button [ngClass]="{'first class':{expression},'second class':{expression}}" (click)='somefunc()'></ngo-button>

NB: выражения похожи на: true / false, 2> 1 и т. Д.

запомнить : удалить {} из {expression}

Answer 3

<ngo-button [class]="'button'" (click)='somefunc()'></ngo-button>

Answer 4

Если вы используете квадратные скобки [] в Angular, вы говорите компилятору Angular, что ниже следует выражение, которое нужно проанализировать.Поскольку btn two не является допустимым выражением, вы получаете ошибку синтаксического анализа.То, что вы на самом деле хотите сделать, это:

[class]="'btn two'".

Стоит отметить, что, поскольку вы решили назвать входные данные «классом», у вас могут возникнуть проблемы позже с Angular.оба передают ваши значения в качестве входных параметров и , применяя значение в качестве класса к родительскому элементу.