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

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

0 голосов
/ 19 ноября 2018

Я создал 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, я снова использую свой component app-button следующим образом: 

<app-button></app-button>

На данный момент я получил HTML button с моим значением по умолчанию text Default 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 переданного modifier string.

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

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

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

У меня есть подписка console error: 

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

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

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

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

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

Тогда 

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

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

0 голосов
/ 19 ноября 2018

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

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

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

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

И 

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