如何绑定 Angular 2 表达式和 TypeScript 方法？答案

【问题标题】：How to bind an Angular 2 expression and TypeScript method?如何绑定 Angular 2 表达式和 TypeScript 方法？
【发布时间】：2019-01-04 03:56:39
【问题描述】：

我要做的是在输入名字和姓氏时显示全名。

这行得通：

<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>

这不起作用（调用类中定义的方法的正确方法是什么？）：

<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->

这也不起作用：

<button ng-click="alertFullName()">show full name</button>

以下是文件： index.html：

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>

    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/hello_world').then(function(src) {
          ng.bootstrap(src.HelloWorld);
        });
      });
    </script>

  </head>

  <!-- 4. Display the application -->
  <body>
    <hello-world>Loading...</hello-world>
  </body>

</html>

src/hello_world.html:

<label>Name:</label>
<input type="text" [(ngModel)]="firstName" placeholder="Enter first name here">
<input type="text" [(ngModel)]="lastName" placeholder="Enter last name here">
<hr>
<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>
<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->
<button ng-click="alertFullName()">show full name</button>

src/hello_world.ts:

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html'
})
export class HelloWorld {
  firstName: string = '';
  lastName: string = '';
  function fullName(): string {
    return firstName + ', ' + lastName;
  }
  function alertFullName() {
    alert(firstName + ', ' + lastName);
  }
}

【问题讨论】：

标签： typescript angular

【解决方案1】：

除了@Günter Zöchbauer 写的（即使用(click)，而不是ng-click），这段代码

function fullName(): string {
   return firstName + ', ' + lastName;
}
function alertFullName() {
  alert(firstName + ', ' + lastName);
}

应该是

fullName():string {
    return this.firstName + ', ' + this.lastName;
}
alertFullName() {
   alert(this.firstName + ', ' + this.lastName);
}

【讨论】：

【解决方案2】：

如果我们查看Angular 2 templates 的文档，我们可以看到{{bindMe}} 形式的插值只能绑定到属性：

表达式只能用于绑定到属性。表达式表示应如何将数据投影到视图。表达式不应该有任何副作用，应该是幂等的。

这意味着以下示例是“非法的”，因为它表示函数调用：

<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

您可以改为使用 getter fullName 来产生您想要的值：

export class HelloWorld {
  firstName: string = '';
  lastName: string = '';
  get fullName () {
      return firstName + ' ' + lastName;
  }
}

然后在你的模板中使用fullName：

<h1 [hidden]="!fullName.length">Hello {{fullName}}!</h1>

【讨论】：

来自Template Syntax guide，插值部分：“表达式可以调用宿主组件的方法，就像我们在此处使用getVal() 所做的那样”。所以我不认为在组件上调用方法是违法的。

【解决方案3】：

这个

<button ng-click="alertFullName()">show full name</button>

应该是

<button (click)="alertFullName()">show full name</button>

这对我来说很好用

<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

（我不得不更改 "!firstName || !lastName" 表达式，因为我使用 Dart 并且 null 检查必须是明确的）

【讨论】：