使用 Angular 2 编写您的第一个组件
3.22/5 (3投票s)
如何使用 Angular 2 编写您的第一个组件
引言
在本文中，我们将快速了解如何构建 Angular 组件来使用 HTML 控件并将其绑定到模型。在开始阅读本文之前，我建议您为 Angular 2 设置开发环境，并从我之前的文章此处下载源代码。
我希望就本文获得反馈。请随时分享您的评论，您也可以通过 shettyashwin@outlook.com 发送电子邮件给我。如果您喜欢本文，请不要忘记给它评分。
必备组件
Angular 2 开发环境和源代码可从此处获取。
开始吧
好的，让我们开始吧。从我之前的文章源代码（app, index.html, package.json, systemjs.config.js, tsconfig.json）复制到新文件夹。 我创建了一个名为firstComponent的文件夹并将我的源代码移到这里。 您的文件夹应该如下所示
由于本文我们将处理 HTML 输入控件，我们需要将表单组件添加到我们的应用程序。在编辑器中打开package.json并将 @angular/forms 添加到 dependencies 部分。
"@angular/forms": "~2.4.0",
我们需要使用 systemjs 映射这个依赖项。在编辑器中打开systemjs.config.js并在 map 部分添加 angular/forms 映射。
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
运行npm update命令来获取npm包。由于我们刚刚添加了依赖项，npm update将解决表单依赖项。 现在我们有了所需的依赖项，让我们创建一个控件，该控件将学生的姓名、姓氏和年龄作为输入，并在下面显示相同的值。 我们将这个控件命名为student-form。在根目录创建一个文件夹 view 并在其中添加student-form.html。 以下是相同的 HTML 语法。
<div>
Student First Name :- <input type="text"><br/>
Student Last Name :- <input type="text"><br/>
Student Age :- <input type="text"><br/>
</div>
在第 2、3 和 4 行，我们有textbox，用户将在其中填写详细信息。 我们需要将这个textbox映射到app文件夹中的一个模型。在app文件夹中创建一个名为student.model.ts的新文件。 将以下源代码复制到student.model.ts。
export class StudentModel {
FirstName : string = "";
LastName : string = "";
Age : number = 0;
}
我们在这里使用export关键字来确保可以在外部访问此类。为了映射模型、视图和逻辑，我们将创建一个新的student.component.ts。 这将具有组件逻辑、模型和 HTML 的映射。
import { Component } from '@angular/core';
import { StudentModel } from './student.model'
@Component({
selector: 'student-form',
templateUrl: '../view/student-form.html'
})
export class StudentComponent {
Student : StudentModel = new StudentModel();
}
在第 2 行，我们正在加载并将student模型映射到StudentModel对象。 使用@component，我们在第 5 和 6 行定义组件名称和 HTML 模板。 在第 9 行，我们将StudentModel对象映射到Student，这将可以在视图级别访问。 我们使用export关键字来使StudentComponent可以在外部访问。 我们需要将这个组件映射到Module，这将用作组件的集合，它类似于我们在 Dotnet 中的namespace和 Java 中的 package。
在app文件夹中创建一个名为student.module.ts的新文件并将以下代码添加到其中
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StudentComponent } from './student.component';
import {FormsModule} from '@angular/forms'
@NgModule({
imports: [ BrowserModule, FormsModule],
declarations: [ StudentComponent ],
bootstrap: [ StudentComponent ]
})
export class AppModule { }
在第 3 行，我们正在导入和映射student组件。我们需要将表单依赖项标记到我们的组件，因此在第 4 行，我们导入了formsModule并在第 7 行注入了它。 StudentComponent还需要在声明和引导级别进行更新。 我们还将不得不使用新添加的模块更新main.ts。 以下是更新的main.ts。
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './student.module';
platformBrowserDynamic().bootstrapModule(AppModule);
在第 2 行，我们映射了student.module。是时候更新student-form.html并将其映射到student模型。我们将使用ngmodel将模型映射到textbox，并使用花括号在控件底部渲染文本。
<div>
Student First Name :- <input [(ngModel)] = "Student.FirstName" type="text"><br/>
Student Last Name :- <input [(ngModel)] = "Student.LastName" type="text"><br/>
Student Age :- <input [(ngModel)] = "Student.Age" type="text"><br/>
{{Student.FirstName}}<br/>
{{Student.LastName}} <br/>
{{Student.Age}}
</div>
我突出显示了需要更新的文本。以下是最终的文件夹结构。
最后，我们需要在index.html中更新我们的组件名称。 将my-app替换为student-form。 这是更新后的 HTML。
<html>
<head>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('applicationStartup').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<student-form>Loading...</student-form>
</body>
</html>
现在要查看最终输出，打开命令提示符，导航到根文件夹并执行npm start。 现在您应该能够看到textbox控件，并且在textbox中输入文本时，您应该能够在页面底部看到输入的文本。
