angular - Angular 7的Html模板中的属性绑定作为函数参数

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。

   获取 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)" />

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)" />

或者您可以在 showGrid 函数中附加 ./app/setup/ 如下

HTML 代码

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

TS 代码

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