Angular: ошибки с переданными значениями @Input для переопределения текста кнопки и добавления класса с помощью ngClass

Question

Я создал angular component называется app-button,

template выглядит так:

<div class="app-button">
    <button class="app-button__btn">{{text}}</button>
</div>

В контроллере я определил два @Input переменные называются modifier а также text:

export class CanButtonComponent implements OnInit {
    @Input() modifier: string;
    @Input() text: string = "Default button";

    ...
}

в template секунды component называется sample-pageЯ использую мой componentapp-button как это:

<app-button></app-button>

На данный момент я получил HTMLbutton с моим по умолчанию textDefault buttonтак что работает нормально.

Сейчас я пытаюсь работать с моими двумя @Input переменные modifier а также text,

Прежде всего, я хотел бы добавить второй класс, если я передам значение для modifier:

<app-button [modifier]="test"></app-button>

Я попробовал это двумя способами:

1.) добавить вторую class прямо в template из app-button с ngClass состояние:

<div class="app-button" [ngClass]="{'app-button--{{modifier}}' modifier != ''}">...</div>

2.) добавить второй class прямо в template из app-button с ngClass призвание function в controller:

шаблон:

<div class="app-button" [ngClass]="getModifier()">...</div>

контроллер:

getModifier() {
    if (this.modifier) {
        return `app-button--${this.modifier}`;
    }
}

Обе идеи не работают, чтобы добавить эту секунду class используя value из пройденного modifierstring,

Второй выпуск с текстом

У меня также есть проблема переопределить значение по умолчанию buttontext также, передав значение для @Input text:

<app-button [text]="This is a new text">...</app-button>

Я должен следовать consoleerror:

Uncaught Error: Template parse errors:
Parser Error: Unexpected token 'is' at column 6 in [this is a new text]

Надеюсь, мои две проблемы ясны.

Answer 1

Когда вы делаете следующее, вы говорите, что передаете свойство "test" из родительского компонента в дочерний:

<app-button [modifier]="test"></app-button>

Если вы пытаетесь передать реальные тестовые строки, вы должны сделать это так:

<app-button [modifier]="'test'"></app-button>

А также:

<app-button [text]="'This is a new text'">...</app-button>

Answer 2

Может быть, это

<div class="app-button {{ modifier!== '' ? 'app-button--' + modifier : ''}}">{{text}}</div>

затем

<app-button [text]="'This is a new text'" [modifier]="'test'" >...</app-button>

Надеюсь, это поможет!