Angular上路—基础知识—组件与模板（显示数据）

MoneStar
1,826 阅读3分钟

组件类和模板共同构成了应用数据的一个视图。
数据绑定：页面上把数据的值及其表现形式组合起来的过程。
通过指令向模板中添加逻辑，指令告诉Angular在渲染页面时要如何修改。
本文问题：模板语法的工作方式？

插值显示组件属性

显示组件属性最简单的方式：插值绑定属性名。{{myHello}}

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

@Component({
  selector: 'app-root',  // 指定当前组件的Css选择器，对应<app-root>元素，该元素是inde.html文件里的一个占位符。
  template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm'
}

Angular 自动从组件中提取 title和myHero 属性的值，并将其插入浏览器中。当这些属性发生变化时，Angular就会自动刷新显示。

模板是包在 ECMAScript 2015 反引号 ( ` ) 中的一个多行字符串。 反引号 ( ` ) — 注意，不是单引号 (') — 允许把一个字符串写在多行上， 使 HTML 模板更容易阅读。

流程：AppComponent类启动，在index.html文件中查找 元素，然后实例化AppComponent,将其渲染到标签中。

选择模板来源

@Component()元数据告诉Angular要到哪里去找该组件的模板。有两种方式存放组件模板：

  • template 定义内联模板，用于小型示例或测试
  • templateUrl属性指向单独的HTML文件，比小型测试或示例更复杂的场景

初始化

使用变量赋值对组件进行初始化；或使用构造函数。

export class AppComponent {
  title = 'Tour of Heroes';  //变量赋值方式
  myHero = 'WebStrom';
  constructor(){
    this.title = 'New Title'; // 构造函数方式
    this.myHero = 'NewHero';
  }
}

循环遍历数据

*ngFor 指令循环遍历数据

<ul>
    // hero 是一个 模板输入变量
    <li *ngFor="let hero of heros">
        {{hero}}
    </li>
</ul>

创建类封装应用数据

组件内部直接定义数据，不是最佳实践；应当将数据封装到对象中（面向对象思维）
创建一个类 ng generate class hero

export class Hero { // 自动将类名首字母大写了
// 构造函数中的参数，默认添加了 private id: number  和 this.number = number;
// 这种方式利用了TypeScript 提供的简写形式----用构造函数的参数直接定义属性。
  constructor( // 手动添加构造函数
    public id: number, // 声明id类型为 数字类型
    public name: string) // 声明name 为字符类型
    { }
}

NgIf条件显示

Angular 的ngIf 指令会根据一个布尔条件来显示或移除一个元素 <p *ngIf="heroes.length > 3">There are many heroes!</p>
Angular 不是在显示和隐藏这条消息，它是从DOM 中添加和移除这个段落元素。这会提高性能，特别是在一些大的项目中有条件的包含或排除一大堆带着很多数据绑定的HTML时。

解答：模板语法的工作方式？

  1. 双花括号的插值
  2. ngFor显示数组
  3. ngIf 条件展示
  4. 生成class文件定义数据类型，面向对象的思想封装数据

要点：

  1. @Component元数据中模板的两种声明方式，template和templateUrl
  2. typeScript语法简写：通过构造函数的参数声明并赋值一个成员变量
avatar
文章
阅读
粉丝