1. Angular 教程-英雄编辑器

2 年 ago
韵, 科
3 minutes

请使用下面列出的选项在中文中进行释义：

1. 参考：提供资料或信息以便参考。

2. 参考：用作依据或指导。

3. 参考：用作比较或参照。

4. 参考：供参考或参考之用。

5. 参考：作为参考或参考依据。

时间的那一段

这个应用程序新增了基本标题。
接下来，创建了一个新组件来显示英雄信息，并将该组件放置在应用程序外壳上。

创建英雄组件

使用Angular CLI生成一个名为”heroes”的新组件。

$ ng generate component heroes

在CLI中，创建一个名为src/app/heroes/的新文件夹，并生成与HeroesComponent相关的三个文件，以及测试文件。

HeroesComponent 的类文件如下所示。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

永远从 Angular 核心库中导入 Component 符号，并在组件类中使用 @Component 进行注解。

@Component是一个用来指定Angular组件元数据的装饰器函数。

CLI生成了三个元数据属性。

    1. 选择器 – 组件的 CSS 元素选择器

模板URL – 组件的模板文件位置

样式URL – 组件的私有CSS样式位置

CSS要素选择器’app-heroes’与父组件的模板中用于识别此组件的HTML元素名称匹配。

在Angular中，ngOnInit()是一个生命周期钩子，会在组件创建完成后立即调用。它适合放置初始化逻辑。

由于始终将组件类导出，所以可以随时在其他地方导入，就像AppModule一样。

添加hero属性

为名为”风暴”的英雄，在HeroesComponent中添加一个名为hero的属性。

hero = 'Windstorm';

展示英雄

打开 heroes.component.html 模板文件。
删除由 Angular CLI 生成的默认文本，并将其替换为与新英雄属性进行数据绑定。

<h2>{{hero}}</h2>

显示HeroesComponent视图

要显示 HeroesComponent，需要将其添加到应用程序外壳 AppComponent 的模板中。

请记住，`app-heroes` 是 `HeroesComponent` 的元素选择器。
因此，在 `AppComponent` 的模板文件中，在标题下方添加 “ 元素。

<h1>{{title}}</h1>
<app-heroes></app-heroes>

如果CLI的ng serve命令仍在执行中，则浏览器会被更新，显示应用程序的标题和英雄的名字。

创建一个英雄界面

真正的的英雄不仅仅是名字。

在src/app文件夹中创建一个独立的文件，命名为Hero接口。为该接口添加id属性和name属性。

export interface Hero {
  id: number;
  name: string;
}

回到HeroesComponent类，并导入Hero接口。
将组件的hero属性重构为Hero类型。
用id为1和名字为Windstorm来进行初始化。

HeroesComponent 的类文件已被修改，如下所示。

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

由于将英雄从字符串更改为对象，页面无法正确显示。

显示英雄物体

为了告知英雄的名字，更新模板绑定，并在详细布局中同时显示 id 和 name。

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

浏览器已更新，英雄的信息将被显示出来。

使用UppercasePipe进行格式设置

让我们这样修正英雄名称的绑定方式。

<h2>{{hero.name | uppercase}} Details</h2>

浏览器被更新，英雄的名字将以大写字母显示。

在补间绑定中，位于管道操作符（|）之后的单词 [uppercase](https://angular.jp/api/common/UpperCasePipe) 将触发内置的 UppercasePipe。

管道适用于对字符串、货币金额、日期和其他显示数据进行格式设置。
Angular具有多个内置管道，还可以自己创建自定义管道。

编辑英雄 (Bianji yingxiong)

用户应该能够通过 文本框编辑英雄的名称。

在文本框中，显示了英雄的名称属性，并且在用户输入时更新该属性。
这表示了从组件类到界面，以及从界面到组件类的数据流动。

要实现该数据流的自动化，需要在表单元素和hero.name属性之间进行双向数据绑定。

双向数据绑定

对HeroComponent模板的详细区域进行重构后，将会如下所示。

<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)]是Angular的双向数据绑定语法。

通过将hero.name属性绑定到HTML的文本框中，可以实现从hero.name属性到文本框，从文本框到hero.name属性的双向数据流动。

找不到的FormsModule

注目于在添加了[(ngModel)]后应用程序无法运行的情况。

要显示错误，请打开浏览器的开发工具，然后在控制台中查找类似以下的消息。

Error: src/app/heroes/heroes.component.html:5:20 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

[ngModel](https://angular.jp/api/forms/NgModel) 是一个有效的Angular指令，但是默认情况下无法使用。

这个属于 [FormsModule](https://angular.jp/api/forms/FormsModule) 的选项，使用它需要选择该模块。

应用模块

在Angular中，我们需要知道应用程序的组件如何组合在一起，以及应用程序需要哪些其他文件和库，这些信息被称为元数据。

一些元数据存在于组件类中添加的@Component装饰器内。
其他重要的元数据存在于@NgModule装饰器内。

@NgModule 装饰器需要在最顶层的 AppModule 类上进行注释，这是最重要的。

在创建项目时，Angular CLI会在src/app/app.module.ts中创建一个AppModule类。在这里可以选择启用[FormsModule](https://angular.jp/api/forms/FormsModule)模块。

导入 FormsModule

打开 AppModule （app.module.ts）文件，在 @angular/forms 库中导入 FormsModule 符号。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

然后，在 @NgModule 元数据的 imports 数组中添加 FormsModule。
这个数组包含了应用所需的外部模块的列表。

imports: [
  BrowserModule,
  FormsModule
],

当浏览器更新后，应用程序应该会再次运行。
您可以编辑英雄的名字，并立即确认更改反映在位于文本框上方的

元素上。

真的吗…太厉害了…

声明HeroesComponent

所有的组件都必须在一个和只能在一个NgModule中声明。

为什么应用程序能够运行，如果我没有声明 HeroesComponent？

这是因为在 Angular CLI 生成 HeroesComponent 时，在 AppModule 中声明了该组件。

打开src / app / app.module.ts，在开头附近找到HeroesComponent被导入。

import { HeroesComponent } from './heroes/heroes.component';

HeroesComponent被声明在@NgModule.declarations数组中。

  declarations: [
    AppComponent,
    HeroesComponent
  ],

AppModule 声明了AppComponent和HeroesComponent两个应用程序组件。

最终的代码审查

在此页面中解释的代码文件如下。

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

<h1>{{title}}</h1>
<app-heroes></app-heroes>

export interface Hero {
  id: number;
  name: string;
}

汇总

    • CLI を使用して、2番目の HeroesComponent を作成した。

HeroesComponent を AppComponent シェルに追加して表示した。
名前をフォーマットするために、 UppercasePipe を適用した。

ngModel ディレクティブで双方向データバインディングを使用した。

AppModule について学んだ。

AppModule に FormsModule をインポートして、 Anguler ngModule ディレクティブを認識して適用するようにした。

AppModule でコンポーネントを宣言することの重要性を学び、 CLI が自分のためにその宣言を行っていることを認識した。

✖
广告
将在 10 秒后关闭
bannerAds