Angular 2 学习笔记

Angular 2 应用主要由以下 几个部分组成:

1、模块 (Modules):
2、组件 (Components):
3、模板 (Templates)​​​​​​​:
4、元数据 (Metadata):
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services):
8、依赖注入 (Dependency Injection)
9、路由(Route):建立URL路径和组件之间的对应关系,根据不同的URL路径匹配对应的组件并渲染。

一、元数据(Metadata)

元数据就是在定义模块、组件、服务的时候,Decorator(装饰器)方法里面的参数内容,例如一个AppComponent的元数据,就是 @Component​​ 里面的参数,如下:

{selector : 'mylist',template : '<h2>元数据</h2>'directives : [ComponentDetails]
}

在Angular2中,Decorator(装饰器)被大量使用,当我们定义模板、组件、服务、指令时,都是使用Decorator来定义。顾名思义,Decorator(装饰器)就是在一个类上面添加一些额外属性或方法

举个例子,根组件AppComponent,在定义它的时候,通过 ​​@Component​​ 才能把它定义成一个Angular的组件。然后我们在这个元数据里面,设置了这个组件对应的selector,模板和样式。

这样Angular框架在解析这个类的时候,就会按照组件的规则去解析并初始化。

当在一个页面里面遇到这个selector设置的标签时,就会初始化这个组件,渲染模板生成html显示到对应的标签里面,并应用样式。

二、模块 (Modules)

module是指使用@NgModule修饰的class。

@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。

可以将组件、服务、指令、方法、管道等封装成一个模块,并且可以将它们的访问权限声明为公有,以便外部模块的组件可以访问和使用到它们。

内置模块

Angular2将许多常用功能分配到一个个的模块中:

  • ApplicationModule:封装一些启动相关的工具
  • CommonModule:封装一些常用的内置指令和内置管道等
  • BrowserModule:封装在浏览器平台运行时的一些工具库,同时将CommonModule和ApplicationModule打包导出,所以通常在使用时引入BrowserModule就可以了
  • FormsModule和ReactiveFormsModule:封装表单相关的组件指令等
  • RouterModule:封装路由相关的组件指令等
  • HttpModule:封装网络请求相关的服务等

在使用前,需导入相关模块包:

  • @angular/core:存放核心代码,如变化监测机制、依赖注入机制、渲染等,核心功能的实现、装饰器(@Component、@Directive等)也会存放到这个模块。
  • @angular/common:存放一些常用的内置指令和内置管道等。
  • @angular/forms:存放表单相关的内置组件及内置指令等。
  • @angular/http:存放网络请求相关的服务等。
  • @angular/router:存放路由相关的组件和指令等。
  • @angular/platform-<x>:存放的是引导启动相关的工具。angular支持在多个平台下运行,不同的平台都有对应的启动工具,这些启动工具会被封装到不同的模块里,如浏览器的启动工具存放在@angular/platform-browser下,服务端渲染的启动工具存放在@angular/platform-server下。

Angular 模块是一个带有 @NgModule 装饰器的类,它接收一个用来描述模块属性的元数据对象

@NgModule的元数据属性:

  • declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员
  • providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
  • imports导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap:通常是app启动的根组件一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会在模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

一个最简单的根模块:

//app/app.module.ts 文件:import { NgModule } from '@angular/core'; //从 @angular/core 中引入 NgModule 修饰器
import { BrowserModule } from '@angular/platform-browser';@NgModule({imports:      [ BrowserModule ],providers:    [ Logger ],declarations: [ AppComponent ],exports:      [ AppComponent ],bootstrap:    [ AppComponent ]
})export class AppModule { }//定义根模块

三、组件 (Components)

组件是构成Angular2应用的砖块。

包括三个部分:带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。

@Component的元数据属性:

  • selector :css选择器,把该组件实例化在 HTML 中对应的选择器上。
  • styleUrls :在单独文件中声明组件的样式。
  • styles : 在组件内部声明样式。styles: ['h1 { font-weight: normal; }']
  • standalone:描述组件是否需要 .NgModule
  • template :一段 HTML,告诉应用如何渲染组件。
  • templateUrl : HTML文件相对路径或绝对 URL。 (不能与template 同时使用)

一个简单的组件:

import { Component } from '@angular/core';//从 @angular/core 中引入 NgModule 修饰器@Component({selector: 'hello-world',template: `<h2>Hello World</h2><p>This is my first component!</p>`
})
export class HelloWorldComponent {//在此类中的代码驱动组件的行为。
}

在html中使用此组件:

<hello-world></hello-world>

在一个Angular2的应用中,组件是一个属性结构,就好像html的DOM树一样,每个Angular2应用都有一个根组件,然后它会有一个个的子组件。得到的是一个组件树。每个组件(除了根组件)都有一个父组件,每个组件定义中“selector”的值,对应父组件中的一个html标签。

组件通信

在Angular中,有多种方法可以实现父子组件通信。

以下是几种常用的方法:

  •  输入属性(Input Properties)
  •  输出属性(Output Properties)
  •  服务(Services)
  •  ViewChild与ContentChild

1. 输入属性(Input Properties)

输入属性是一种用于从父组件向子组件传递数据的方法。通过使用@Input()装饰器,我们可以在子组件中定义一个公共属性来接收来自父组件的数据。

import { Component, Input } from '@angular/core';@Component({selector: 'app-child',template: '<p>{{ message }}</p>'
})
export class ChildComponent {@Input() message: string;
}

在上述代码中,我们使用@Input()装饰器来定义了一个名为message的输入属性。在子组件的模板中,我们使用插值表达式{{ message }}来展示接收到的消息。

2. 输出属性(Output Properties)

输出属性允许子组件向父组件传递信息。通过使用事件触发器和@Output()装饰器,我们可以在子组件中定义一个事件,并在适当的时候将数据作为事件参数发送给父组件。

import { Component, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-child',template: '<button (click)="sendMessage()">Send Message</button>'
})
export class ChildComponent {@Output() messageEvent = new EventEmitter<string>();sendMessage() {this.messageEvent.emit('Hello from child component');}
}

在上述代码中,我们定义了一个名为messageEvent的输出属性,并使用EventEmitter来创建一个新的事件。在子组件中,当用户点击按钮时,我们通过调用sendMessage()方法并使用emit()方法来触发messageEvent事件,并将一个字符串作为参数传递给父组件。

3. 服务(Services)

服务是一种共享数据和状态的有效方式。通过创建一个共享的服务,我们可以在任何组件之间传递数据和共享状态。组件可以通过依赖注入服务,并使用服务提供的方法和属性进行通信。

import { Injectable } from '@angular/core';@Injectable()
export class DataService {private message: string;setMessage(message: string) {this.message = message;}getMessage() {return this.message;}
}

在上述代码中,我们创建了一个名为DataService的服务,并在其中定义了一个私有的message属性和相应的设置和获取方法。通过在需要访问该数据的组件中注入DataService,我们可以在组件之间共享数据。

4. ViewChild与ContentChild

通过使用ViewChild和ContentChild装饰器,我们可以在父组件中获取对子组件的引用,并直接调用子组件的方法或访问其属性。这种方法适用于需要直接与子组件进行交互的情况。

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';@Component({selector: 'app-parent',template: `<app-child></app-child><button (click)="callChildMethod()">Call Child Method</button>`
})
export class ParentComponent {@ViewChild(ChildComponent) childComponent: ChildComponent;callChildMethod() {this.childComponent.childMethod();}
}

在上述代码中,我们使用@ViewChild()装饰器来获取对ChildComponent的引用,并将其赋值给childComponent属性。然后,在父组件的模板中,我们使用一个按钮来触发callChildMethod()方法,该方法会调用子组件中的childMethod()方法。

四、数据绑定(Data binding)

Angular2的数据更新检测是在每个组件上有一个检测器。这样,就算应用中有再多绑定的变量,当有一个数据修改后,也只是对应的那个组件的检测器被触发,来检查它以及它所有的子组件的数据修改。

Angular 添加了一些语法元素以扩展 HTML,让你可以从组件中插入动态值。当组件的状态更改时,Angular 会自动更新已渲染的 DOM。

数据绑定的语法有四种形式:

1、插值 {{}} : 在 HTML 标签中显示组件值。(单向)

<h3>
{{title}}
<img src="{{ImageUrl}}">
</h3>

2、属性绑定 []: 把元素的属性设置为组件中属性的值。(单向)

<img [src]="userImageUrl">

3、事件绑定 (): 通过在圆括号中指定事件名称来声明一个事件监听器(单向)

//在组件方法名被点击时触发
<button (click)="sayMessage()">保存</button>//组件类中定义的方法:
sayMessage() {alert(this.message);
}

4、双向绑定 []  (): 使用Angular里的NgModel指令可以更便捷的进行双向绑定。

<input [value]="currentUser.firstName"(input)="currentUser.firstName=$event.target.value" >

双向绑定就是用户在页面上修改这个值时,这个值就会直接反馈到组件中。同样,如果在组件中通过某种方式修改了这个值,页面上,也会显示最新的值。

对于上面的 ​[]​ ​()​​​  两种类型的绑定,可以理解成’输入’和’输出’。 ​​

五、服务(Services)

Angular2并没有对服务的定义做任何的规则限制,任何的类都可以被定义成服务,这个类中可以包含业务方法,也可以包含环境配置变量。

一个简单的服务:

export class loggerServices {log(msg: any)   { console.log(msg); }error(msg: any) { console.error(msg); }warn(msg: any)  { console.warn(msg); }
}

我们只需要定义一个class,并把它export就可以了。

六、依赖注入 (Dependency Injection)

Angular借用了java等语言中某些容器库的概念,它将所有service实例的创建都由容器来完成。当一个service需要引用另一个service的时候,不需要先创建service实例,然后通过实例调用它的方法或属性,而是直接从容器中获取相应service的实例,无需我们操心如何实例化它们。

在Angular2中,依赖注入 (Dependency Injection) 主要是用于管理service实例的注入

使用 @Injectable 装饰器以声明此类可以被注入。

@Injectable​​ 
export class HeroService {
...
}

然后就可以在其它地方注入并使用它。

1:提供依赖项

  • 组件级别,使用 @Component 装饰器的 providers字段。在这种情况下,HeroService将可用于此组件的所有实例,以及它的模板中使用的其他组件和指令。也就是说,在当前节点,以及它所有的子节点的组件上,HeroService类的实例是共用的,它们都共享一个服务实例。例如:

@Component({selector: '...',template: '...',providers: [HeroService]
})
class HeroListComponent {}
  • NgModule 级别,要使用 @NgModule 装饰器的 providers字段。在这种情况下,HeroService可用于此 NgModule ,或与本模块位于同一个 ModuleInjector 的其它模块中声明的所有组件、指令和管道。当你向特定的 NgModule 注册提供者时,同一个服务实例可用于该 NgModule 中的所有组件、指令和管道。要理解所有边缘情况,参见多级注入器。例如:

@NgModule({declarations: [...]providers: [HeroService]
})
class HeroListModule {}
  • 在应用根级别,允许将其注入应用的其他类中。这可以通过将 providedIn: 'root'字段添加到 @Injectable 装饰器来实现:

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

当你在根级别提供服务时,Angular 会创建一个 HeroService 的共享实例,并将其注入到任何需要它的类中。在 @Injectable 元数据中注册提供者还允许 Angular 通过从已编译的应用程序中删除没用到的服务来优化应用程序,这个过程称为摇树优化(tree-shaking)。

2:注入依赖项

最常见方法是在类的构造函数中声明它。当 Angular 创建组件、指令或管道类的新实例时,它会通过查看构造函数的参数类型来确定该类需要哪些服务或其他依赖项。例如,如果 HeroListComponent 要用 HeroService,则构造函数可以如下所示:

@Component({ … })
class HeroListComponent {constructor(private service: HeroService) {}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/222800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【libcurl库】OpenSSL 库、多线程、断点续传(二)

一、libcurl函数库常用字段解读 1、curl_global_init()&#xff1a;初始化libcurl2、curl_easy_init()&#xff1a;得到easy interface型指针&#xff0c;拿到句柄3、curl_easy_setopt(CURL *handle, CURLoption option, parameter)&#xff1a;设置传输选项 第二个参数CURLop…

超聚变服务器(原华为服务器)网站模拟器

一、超聚变服务器&#xff08;原华为服务器&#xff09;网站模拟器&#xff1a; 原来了解服务器可以从他的网站上进行了解&#xff0c;模拟器做的很好了。 https://support.xfusion.com/server-simulators/ 有很多的模拟器&#xff0c;今天主要看下BMC的设置 有很多的在线工具…

XUbuntu22.04之HDMI显示器设置竖屏(一百九十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Unity3D 如何读取策划给定的Excel表格详解

前言 Unity3D是一款非常流行的游戏开发引擎&#xff0c;它可以帮助开发者快速构建游戏并进行测试和发布。在游戏开发过程中&#xff0c;策划经常会提供一些Excel表格&#xff0c;这些表格包含了游戏中的各种数据&#xff0c;如角色属性、技能效果等等。那么&#xff0c;如何在…

谷歌宣布向云计算客户开放 Gemini Pro,开发者可用其构建应用

12 月 14 日消息&#xff0c;美国时间周三&#xff0c;谷歌宣布了一系列升级的人工智能&#xff08;AI&#xff09;功能&#xff0c;旨在为其云计算客户提供更好的服务。这家科技巨头正试图赶上竞争对手&#xff0c;比如微软和 OpenAI&#xff0c;它们都在积极利用人工智能的热…

Axure自定义元件

目录 1.processOne的使用 ​编辑2.自定义元件的使用、 2.1如何自定义一个元件 2.2使用自定义元件 导语&#xff1a; Axure是绘制原型图的软件&#xff0c;但是我们很多时候不知道&#xff0c;画哪一个板块&#xff0c;所以流程图的绘制也是非常重要的 1.processOne的使用…

【图论】普利姆算法,最小生成树

一次加入一个节点到我们的最下生成树中。加入哪个&#xff1f;跟着下面的步骤走一遍你就会了。 1. 把第一个节点A添加进来 2. 看两条边<A,B>,<A,E>,一个长度是3&#xff0c;一个长度是4&#xff0c;把长度短的边的另一个节点添加进来&#xff0c;也就是B 3. 再看A,…

oracle aq java jms使用(数据类型为XMLTYPE)

记录一次冷门技术oracle aq的使用 版本 oracle 11g 创建用户 -- 创建用户 create user testaq identified by 123456; grant connect, resource to testaq;-- 创建aq所需要的权限 grant execute on dbms_aq to testaq; grant execute on dbms_aqadm to testaq; begindbms_a…

超详细 | 哈里斯鹰优化算法原理、实现及其改进与利用(Matlab/Python)

测试函数为F9 在MATLAB中执行程序结果如下&#xff1a; 在Python中执行程序结果如下&#xff1a; 哈里斯鹰优化算法(Harris Hawks Optimization , HHO)是 Heidari等[1]于2019年提出的一种新型元启发式算法&#xff0c;设计灵感来源于哈里斯鹰在捕食猎物过程中的合作行为以及突…

flume系列之:监控flume agent channel的填充百分比

flume系列之:监控flume agent channel的填充百分比 一、监控效果二、获取flume agent三、飞书告警四、获取每个flume agent channel的填充百分比一、监控效果 二、获取flume agent def getKafkaFlumeAgent():# 腾讯云10.130.112.60zk = KazooClient(hosts

Java中Math.ceil()​和 ​Math.floor()​

​​Math.ceil()​和 ​Math.floor()​是Java中用于取整的数学方法。 区别如下&#xff1a; ​​Math.ceil()​: 向上取整。 该方法返回一个大于或等于参数的最小整数值。如果参数是正数&#xff0c;则返回大于或等于该数的最小整数。如果参数是负数&#xff0c;则返回不小于该…

Web3.0和WebAssembly

1.Web3.0!WebAssembly WebAssembly&#xff08;Wasm&#xff09;并不等同于Web 3.0&#xff0c;它们是两个不同的概念。 WebAssembly是一种低级的编程语言&#xff0c;旨在提供高性能、可移植、安全的二进制指令集&#xff0c;用于在web上执行的应用程序。它是为了改善web应用…

Redis过期淘汰策略

一. Redis过期淘汰策略 当Redis已用内存超过maxmemory限定时&#xff0c;触发主动清理策略。 主动清理策略在Redis 4.0之前一共实现了 6 种内存淘汰策略&#xff0c;在 4.0 之后&#xff0c;又增加了 2 种 策略&#xff0c;总共8种&#xff1a; 针对设置了过期时间的key做处理…

Day60力扣打卡

打卡记录 1682分了记录下&#xff0c;希望下回能突破1700捏。作为一个菜鸟&#xff0c;知道自己很菜&#xff0c;一步步走到现在还是很开心的&#xff0c;从以前的周赛稳定1题到稳定2题&#xff0c;到现在的时有时无的3题。每次刷题都期盼有所长进&#xff0c;虽然更多的时候收…

【C语言】字符串函数及其模拟实现

这是最好的时代&#xff0c;这是最坏的时代&#xff0c;我们一无所有&#xff0c;我们巍然矗立 本文由睡觉待开机原创&#xff0c;未经允许不得转载。 本内容在csdn网站首发 欢迎各位点赞—评论—收藏 如果存在不足之处请评论留言&#xff0c;共同进步&#xff01; 系列文章目录…

OpenSSL的源码在哪里下载?

官方网站去下载&#xff0c;网址&#xff1a; https://www.openssl.org/source/ 比较老的版本的下载页面地址&#xff1a; https://www.openssl.org/source/old/ 由于某面板的OpenSSL模块的安装配置语句如下&#xff1a; --with-openssl/root/rpmbuild/BUILD/openssl-1.0.2u所…

2-2基础算法-Nim和/前缀和/差分

文章目录 一.Nim和二.前缀和&区间和三.差分 一.Nim和 Nim游戏是一个数学策略游戏&#xff0c;通常涉及两名玩家轮流从几堆物品&#xff08;如石子或饼干&#xff09;中取走一定数量的物品。每个玩家每次可以从任意一堆中取走任意数量的物品&#xff0c;但必须至少取走一个…

使用qt实现四则运算计算机项目

这是我们要包含的头文件 #include <QWidget> #include<QStack> #include<string.h> #include<string> 这是我在ui界面创建的计算机基础框架。 接下来要实现按住每个按钮在白框内显示&#xff1b; 因此我们要定义一个QString 类型的变量 QString e…

Linux系统上64位ATT汇编语言多个源文件计算两个数的平方

运行程序的环境 sudo lsb_release -a看到操作系统是Ubuntu 22.04 LTS。 sudo uname -r看到内核版本是5.15.0-86-generic。 sudo as --version看到as的版本是2.38。 sudo ld --version看到ld的版本是2.38。 sudo gcc --version看到gcc版本是11.2.0。 sudo gdb --version看到gdb…