augular 英雄之旅

刘嘿哈

发布于 2022-10-25 14:08:12

1.7K0

发布于 2022-10-25 14:08:12

文章被收录于专栏：js笔记

1.利用cli创建项目

ng new angular-tour-of-heroes

2.启用应用

cd ./angular-tour-of-heroes
ng serve --open //--open 标志会打开浏览器，并访问 http://localhost:4200/，可缩写成-o

angular组件

组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。像一组html的集合，可与用户交互，可复用，创建好的项目的src目录下有个app目录，这是整个程序的根组件 app.component.ts— 组件的类代码，这是用 TypeScript 写的。

app.component.html— 组件的模板，这是用 HTML 写的。

app.component.css— 组件的私有 CSS 样式。

修改数据打开组件的类文件 (app.component.ts)，并把 title 属性的值修改为 'Tour of Heroes' （英雄之旅）。

title = 'Tour of Heroes';

增加样式打开 src/styles.css 并把下列代码添加到此文件中。

 body{
background:red;
}

创建一个组件创建一个英雄列表组件

ng generate component heroes //可简写:ng g c heroes

要从angular核心库中导出 Component符号，它是一个装饰器工厂，为组件提供需要的元数据，cli自动生成三个元数据用于为该被装饰的组件指定 Angular 所需的元数据。

1.CLI 自动生成了三个元数据属性： selector---组件的选择器（css选择器），该组件被使用时的组件名称 templateUrl---组件模板文件的位置 styleUrls---组件私有 CSS 样式表文件的位置,数组结构，可以为多个。 2.CLI自动在app.Module.ts中自动导入HeroesCompent(就是cli刚刚生成的heroes.component.ts中的类)

添加属性在class中增加属性即可

import {Component } from '@angular/core'
@Component({
  selector:"app-heroes",
  templateUrl:"./heroes.component.html",
  styleUrls:["./heroes.component.css"]
})
class HeroesComponent implements  onInit{
  constructor() { }
    ngOnInit() {
  }
}

定义一个接口创建src/app/hero.ts,定义一个Hero类型并且导出

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

引入Hero 定义一个属性，\src\app\heroes\heroes.component.ts

import {Hero} from '../hero'
...
//类的属性
hero:Hero={
id:1,
name:"tom"
}

模板中显示

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

使用 UppercasePipe 进行格式化

<h2>{{hero.name | [uppercase](https://angular.cn/api/common/UpperCasePipe)}} Details</h2>

FormsModule 输入输出指令包 [(ngModel)]="name"是ng的双向绑定语法，ngModel是指令，默认不能使用，依赖FormsModule 用 @Input 装饰器来让 hero 属性可以在外部的 HeroesComponent 中绑定。

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

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  
  //这是重点
  @Input() hero:Hero | undefined 
  constructor() { }

  ngOnInit(): void {
  }

}

使用该组件时传入属性

<app-hero-detail [hero]="hero"></app-hero-detail>

添加服务

创建服务模块

ng generate service hero

自动生成service文件，大概是说将会把服务注入到根组件中

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

@Injectable({
 providedIn: 'root'
})
export class HeroService {

 constructor() { }
}

从rxjs中获取Observable类型和of方法，Observable泛型接口接口一个类型，of方法会可将这个类型包装成Observable<类型> import { Observable,of } from 'rxjs';

import { Injectable } from '@angular/core';
import { Observable,of } from 'rxjs';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor() {}
//这里模拟异步，HttpClient.get<Hero[]>() 它也同样返回一个 Observable<Hero[]>
  getHero(): Observable<Hero[]> {
    return of(HEROES);
  }
}

Observable.subscribe() 是关键的差异点。订阅可观测对象，可观测对象成功后及执行订阅事件

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-06，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript