Свойство Binding как параметр функции в HTML-шаблоне Angular 7

Question

У меня есть проблема в HTML-шаблон. Я хочу вызвать функцию и передать ей параметр. Этот параметр является свойством в классе компонентов. Как я мог связать это свойство в вызове функции. Я пробовал разные варианты, но не смог добиться успеха.

1

<input type="button" class='Button' value='Back' 
(click)="showGrid('{{"./app/setup/" + url}}')" />

2

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/ + {{url}}')" />

3. Использование Getter в компоненте.

   get myUrl = function () { return "./app/setup/" + $ {this.Url} }

В HTML

<input type="button" class='Button' value='Back' 
(click)="showGrid('{{myUrl}}')" />

Как я могу связать свойство в вызове функции. Пожалуйста, предложите.

Спасибо

Answer 1

Попробуйте это

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/' + url)" />

Или вы можете добавить ./app/setup/ в функцию showGrid следующим образом

HTML код

<input type="button" class='Button' value='Back' (click)="showGrid(url)" />

Код TS

showGrid(urlData){
  urlData = './app/setup/' + urlData;
}

Answer 2

Всегда хорошая идея иметь эти литералы как const. Никогда не кодируйте эти значения в виде (html).

Используйте подход ниже.

app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent {

    appUrls = APP_URLS;

    constructor() { }

    showGrid(url) {
        // to-do
    }
}

export const APP_URLS = {
    'BASEURL': '/something',
    'URL1': `./app/setup/${this.BASEURL}`,
};

app.component.html

<input type="button" class='Button' value='Back' (click)="showGrid(appUrls.URL1)" />

Answer 3

Попробуйте это -

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/' + url)" />