Невозможно указать пробел в качестве значения в свойстве 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 и т. Д.

помните: удалите {} of {expression}

Answer 3

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

Answer 4

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

[class]="'btn two'",

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