如何绑定角2 EX pression和打字稿方法 [英] how to bind angular 2 expression and typescript method
本文介绍了如何绑定角2 EX pression和打字稿方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我所试图做的是展现十足的名字，当输入姓氏和名字。
本作品：
＆LT; H1 [隐藏] =名字|| lastName的！＆GT;您好！{{lastName的+'，'+的firstName}}＆LT; / H1＆GT;
这不起作用（什么是调用类中定义的方法正确的方法是什么？）：
＆LT;！ - H1 [隐藏] =＆GT;您好{{全名（）}}＆LT;名字|| lastName的！！/ H1 - ＆GT;
这不工作之一：
＆LT;按钮NG点击=alertFullName（）＆gt;显示全名＆LT; /按钮＆GT;
下面是文件：
index.html的：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT; ＆LT; HEAD＆GT;
＆LT;标题＆GT; 2角及快速入门LT; /标题＆GT; ＆LT;！ - 1.装入库 - ＆GT;
＆所述; SCRIPT SRC =https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/typescript.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2-polyfills.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/Rx.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2.dev.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 2.配置SystemJS - ＆GT;
＆LT;脚本＆GT;
System.config（{
transpiler：打字稿，
typescriptOptions：{emitDecoratorMetadata：真正}，
包：{SRC：{defaultExtension：'TS'}}
}）;
＆LT; / SCRIPT＆GT; ＆所述;！ - 3.引导 - ＆GT;
＆LT;脚本＆GT;
System.import（'angular2 /平台/浏览器），然后（功能（NG）{
System.import（'SRC /参考hello world），然后（功能（SRC）{
ng.bootstrap（src.HelloWorld）;
}）;
}）;
＆LT; / SCRIPT＆GT; ＆LT; /头＆GT; ＆LT;！ - 4显示应用程序 - ＆GT;
＆LT;身体GT;
＆LT;你好世界＆GT;加载...＆LT; /你好世界＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
的src / hello_world.html：
＆LT;标签＆gt;名称：LT; /标签＆gt;
＆LT;输入类型=文本[（ngModel）] =名字占位符=在这里输入名字＆GT;
＆LT;输入类型=文本[（ngModel）] =姓氏占位符=请在此输入姓氏＆GT;
＆LT;小时＆GT;
＆LT; H1 [隐藏] =名字|| lastName的！＆GT;您好{{lastName的+'，'+的firstName}}＆LT;！/ H1＆GT;
＆LT;！ - H1 [隐藏] =＆GT;您好{{全名（）}}＆LT;名字|| lastName的！！/ H1 - ＆GT;
＆LT;按钮NG点击=alertFullName（）＆gt;显示全名＆LT; /按钮＆GT;
的src / hello_world.ts：
进口{}组件从angular2 /核心;@零件（{
// index.html中声明的标签名，该组件华武官
选择：你好，世界 //模板的位置此组件
templateUrl：'SRC / hello_world.html
}）
出口类的HelloWorld {
姓：字符串='';
名字：字符串='';
功能全名（）{字符串
返回的firstName +'，'+ lastName的;
}
功能alertFullName（）{
警报（名字+'，'+的lastName）;
}
}
解决方案
在除了什么@君特Zöchbauer写道（即使用（点击），而不是 NG-点击），这code
功能全名（）{字符串
返回的firstName +'，'+ lastName的;
}
功能alertFullName（）{
警报（名字+'，'+的lastName）;
}
应
全名（）{字符串
返回this.firstName +'，'+ this.lastName;
}
alertFullName（）{
警报（this.firstName +'，'+ this.lastName）;
}
What I am trying to do is to show the full name, when first name and last name are entered.
This works:
<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!-->
This does not work either:
<button ng-click="alertFullName()">show full name</button>
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:
<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);
}
}
解决方案
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);
}
should be
fullName():string {
return this.firstName + ', ' + this.lastName;
}
alertFullName() {
alert(this.firstName + ', ' + this.lastName);
}
这篇关于如何绑定角2 EX pression和打字稿方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
