属性在 Angular 7 的 Html 模板中绑定为函数参数

Question

我在 html 模板中遇到问题。我想调用一个函数并将参数传递给函数。此参数是组件 class 中的属性。我如何在函数调用中绑定此属性。我尝试了不同的选择，但未能成功。

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。

获取 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

试试这个

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

Answer 3

将这些文字设为 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)" />

属性在 Angular 7 的 Html 模板中绑定为函数参数

Property Binding as function parameter in Html template of Angular 7

angular

property-binding

属性 在 Angular 7 的 Html 模板中绑定为函数参数

Property Binding as function parameter in Html template of Angular 7

angular

property-binding

属性在 Angular 7 的 Html 模板中绑定为函数参数