Невозможно указать пробел в качестве значения в свойстве Input в Angular6.
Я пытаюсь создать общие элементы управления, как это
динамические-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'
я полагаю, нам не разрешено добавлять пробел во входном параметре, есть ли другой способ реализовать это?
4 ответа
<ngo-button [class]="'btn two'" (click)='somefunc()'></ngo-button>
Синтаксис по умолчанию Angular. Вы должны предоставить строку в кавычках, если вы используете [input]
нотации.
В противном случае:
<ngo-button class="btn two" (click)='somefunc()'></ngo-button>
Хотя я должен сказать, что на самом деле не понимаю, почему вы используете входные данные для предоставления классов вашего компонента.
Вы можете использовать [ngClass]
<ngo-button [ngClass]="{'first class':{expression},'second class':{expression}}" (click)='somefunc()'></ngo-button>
NB: выражения похожи на: true/false, 2>1 и т. Д.
помните: удалите {} of {expression}
<ngo-button [class]="'button'" (click)='somefunc()'></ngo-button>
Если вы используете квадратные скобки [] в Angular, вы говорите компилятору Angular, что ниже следует выражение, которое нужно проанализировать. поскольку btn two
неверное выражение, вы получаете ошибку синтаксического анализа. Что вы на самом деле хотите сделать, это:
[class]="'btn two'"
,
Стоит отметить, что, поскольку вы решили назвать входные данные "классом", у вас могут возникнуть проблемы с тем, чтобы Angular передавал значения в качестве входного параметра и применял значение в качестве класса к родительскому элементу.