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

在组件中使用Getter。

get myUrl = function（）{ 返回“ ./app/setup/” + $ {this.Url} }

在html中，

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

如何在函数调用中绑定属性。请提出建议。

谢谢

Answer 1

尝试一下-

return await

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;
}

在Angular 7的HTML模板中将属性绑定作为函数参数

3 个答案: