如何绑定Angular 2表达式和TypeScript方法? [英] How to bind an Angular 2 expression and TypeScript method?
本文介绍了如何绑定Angular 2表达式和TypeScript方法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要输入的名字和姓氏是我的全名.
What I am trying to do is to show the full name, when first name and last name are entered.
这有效:
<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>
这不起作用(调用类中定义的方法的正确方法是什么?):
This does not work (what is the correct way of invoking a method defined in the class?):
<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->
这也不起作用:
<button ng-click="alertFullName()">show full name</button>
以下是文件: index.html:
Here are the files: 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:
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:
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);
}
}
推荐答案
除了@GünterZöchbauer编写的内容(即使用(click)，而不是ng-click)之外，此代码
In addition to what @Günter Zöchbauer wrote (i.e., use (click), not ng-click), this code
function fullName(): string {
return firstName + ', ' + lastName;
}
function alertFullName() {
alert(firstName + ', ' + lastName);
}
应该是
fullName():string {
return this.firstName + ', ' + this.lastName;
}
alertFullName() {
alert(this.firstName + ', ' + this.lastName);
}
这篇关于如何绑定Angular 2表达式和TypeScript方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
