angular学习总结-基本使用
关于Angular上手学习,可以去官网把示例先敲一遍,边做边学习。
点我传送门
下面将介绍一些关于Angular的基本知识。
生命周期
当你的应用通过调用构造函数来实例化一个组件或指令时,Angular 就会调用那个在该实例生命周期的适当位置实现了的那些钩子方法。
钩子方法 | 说明 |
---|---|
ngOnChanges() | 如果组件绑定过输入属性,那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。 ( 注意:如果操作频繁,会严重影响性能。) |
ngOnInit() | 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。只调用一次。 |
ngDoCheck() | 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 |
ngAfterContentInit() | 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。第一次 ngDoCheck() 之后调用,只调用一次。 |
ngAfterContentChecked() | 每当 Angular 检查完被投影到组件或指令中的内容之后调用。(ngAfterContentInit() 和每次 ngDoCheck() 之后调用) |
ngAfterViewInit() | 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked() 之后调用,只调用一次。 |
ngAfterViewChecked() | 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。(ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。) |
ngOnDestroy() | 在 Angular 销毁指令或组件之前立即调用。 |
组件获取初始数据在ngOnInit()进行。
下面图展示的是当用户单击 Create… 按钮,然后单击 Destroy… 按钮后的生命周期执行顺序和频率。
日志信息的日志和所规定的钩子调用顺序是一致的:先执行constructor构造函数,再 OnChanges、OnInit、DoCheck (3x)、AfterContentInit、AfterContentChecked (3x)、 AfterViewInit、AfterViewChecked (3x)和 OnDestroy
常用语法
*ngFor
结构型指令,通常用于遍历数组。
<div *ngFor="let product of products"><h3>{{ product.name }}</h3>
</div>
*ngIf
用于条件判断。
<div *ngFor="let product of products"><p *ngIf="product.description">Description: {{ product.description }}</p>
</div>
[ ]
用于属性绑定。
<div *ngFor="let product of products"><h3><a [title]="product.name + ' details'">{{ product.name }}</a></h3>
</div>
( )
用于事件绑定。
<button (click)="share()">Share
</button>
[( )]
用于双向数据绑定。
<textarea rows="2" [(ngModel)]="applyInfo.reason" placeholder="申请原因"></ion-textarea>
组件创建
第一步:执行命令
ng generate component child
执行完毕后,会生成四个文件。
分别为scss、html、.spec.ts(单元测试文件)、.ts 文件。
设定:父组件为HomePage,子组件为ChildComponent
ChildComponent组件内容
<div style="background: yellowgreen;width: 100%;height: 200px"><h1>子组件区域</h1>
</div>
第二步:新建component.module.ts文件,引入和导出ChildComponent组件。
第三步:在home.module.ts中引入ComponentModule
第四步:使用ChildComponent组件
在父组件HomePage中,使用ChildComponent
<div style="background: pink;width: 100%;height: 100%;"><h1>父组件区域</h1><app-child></app-child>
</div>
注意:子组建名字不要写错了,要取子组建@Component修饰器中的selector名。
第五步:刷新页面,子组建引入成功。
另外,我之前按照另外一种方式,直接在app.module.ts中引入ChildComponent,如下所示:
结果页面报错:
core.mjs:14621 NG0304: 'app-child' is not a known element:
1. If 'app-child' is an Angular component, then verify that it is part of this module.
2. If 'app-child' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
我想会不会是版本问题导致引入方式改变,官网上还有网上都是这种引入方式。
我现在demo使用的版本是angular13,用我上面步骤说的module.ts的引入方式就不会报错。
其他版本我还未尝试。
父子组件通信
1. 父组件向子组件传值
子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。
要使用 @Input(),就必须对父组件和子组件进行配置。
1)对子组件进行配置:
要使用 @Input() 装饰器,首先要导入 Input,然后用 @Input() 装饰该属性。
src/app/child/child.component.ts
import { Component, OnInit, Input } from '@angular/core';@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements OnInit {@Input() contentText=''constructor() { }ngOnInit() {}}
@Input() 属性可以是任意类型,比如 number、string、boolean 或 object。item 的值来自父组件。
接下来,在子组件模板中添加以下内容。
src/app/child/child.component.html
<div style="background: yellowgreen;width: 100%;height: 200px"><h1>子组件区域</h1><h2>{{contentText}}</h2>
</div>
2)配置父组件
使用属性绑定把子组件的 contentText 属性绑定到父组件的 contentText 属性上。
在父组件类中,为 contentText 指定一个值:
src/app/home/home.page.ts
import { Component } from '@angular/core';@Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],
})
export class HomePage {contentText='台湾回归'constructor() {}}
src/app/home/home.page.html
<div style="background: pink;width: 100%;height: 100%;"><h1>父组件区域</h1><app-child [contentText]='contentText'></app-child>
</div>
通过 @Input(),Angular 把 contentText 的值传给子组件。
方括号 [] 中的目标就是子组件中用 @Input() 装饰的那个属性。绑定源(等号的右边部分)则是父组件传给内嵌组件的数据。
要想监视 @Input() 属性的变化,可以用 Angular 的生命周期钩子OnChanges 。
2. 子组件向父组件传值
子组件或指令中的 @Output() 装饰器允许数据从子组件传给父组件。
功能需求:点击子组件的按钮,更新父组件的‘祝福语’。
1)配置子组件
在子组件类中导入 Output 和 EventEmitter,并添加clickMe方法。
src/app/child/child.component.html
<div style="background: yellowgreen;width: 100%;height: 200px"><h1>子组件区域</h1><h2>{{contentText}}</h2><button style="width: 150px;height:30px;background: #fff;" (click)="clickMe('祝祖国繁荣昌盛!')">点我祝福</button>
</div>
src/app/child/child.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements OnInit {@Input() contentText=''@Output() notify= new EventEmitter<string>()constructor() { }ngOnInit() {}clickMe(value:string){this.notify.emit(value)}}
说明:
@Output() - 一个装饰器函数,它把该属性标记为数据从子组件进入父组件的一种途径
newItemEvent - 这个 @Output() 的名字
EventEmitter - 这个 @Output() 的类型
new EventEmitter() - 使用 Angular 来创建一个新的事件发射器,它发出的数据是 string 类型的。
2)配置父组件
src/app/home/home.page.html
<div style="background: pink;width: 100%;height: 100%;"><h1>父组件区域</h1><app-child [contentText]='contentText' (notify)="notifyMe($event)"></app-child><p>祝福语:{{describe}}</p><p></p>
</div>
src/app/home/home.page.ts
import { Component } from '@angular/core';@Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],
})
export class HomePage {contentText='台湾回归'describe=''constructor() {}notifyMe(value){this.describe=value}
}
3)最后效果图
angular学习总结-基本使用相关推荐
- angular 学习资源
README.md AngularJS学习 注:截至2016年10月,有一个[收集Angular 2的链接的新回购](https://github.com/jmcunningham/AngularJS ...
- angular学习(六)—— 依赖注入
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/53409171 依赖注入 依赖注入(DI)是一种处理组件如何获得依赖的软件设计模 ...
- angular学习-2021.5
angular学习笔记 1.基本概览 模块 Module 组件 Component 指令 Directive 服务 Service 路由 Router 2. 模块Module 2.1 模块的含义 2. ...
- angular学习是有好处
Angular是框架的一种,不学也能开发前端.学backbone或者ember也能开发前端.没有js的mvc,就光弄个jquery,也能开发前端. 那 到底要不要学?个人觉得就是要看发展趋势.angu ...
- Angular学习总结(Angular2及其以后版本)
Angular学习总结 1.Angular和Angular.js介绍 2. 环境搭建 3.项目创建 4.项目运行 5.打包 6.相关资料补充(UI地址及其相关使用方法的博客) 7.电梯 1.Angul ...
- Angular学习教程-英雄之旅
Angular学习教程-英雄之旅 官网链接 https://angular.cn/tutorial 文章目录 Angular学习教程-英雄之旅 一.能学习到 二.创建项目 三.英雄编辑器 Part1 ...
- 【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
- Angular学习(一):模板与数据绑定
HTML 是 Angular 模板的语言.这一节学习如何通过数据绑定来动态设置 DOM(文档对象模型)的值. 一.绑定语法 绑定的类型可以根据数据流的方向分成三类: 从数据源到视图.从视图到数据源以及 ...
- Angular 学习笔记 Material
以后都不会写 0 到 1 的学习记入了,因为官网已经写得很好了. 这里只写一些遇到的坑或则概念和需要注意的事情. Material Table 1. ng-content 无法传递 CdkColumn ...
- Learning Angular 学习Angular Lynda课程中文字幕
Learning Angular 中文字幕 学习Angular 中文字幕Learning Angular 框架可以通过提供一种可以产生特殊功能的开发模型来帮助您快速完成任务 本课程帮助您了解构建单页W ...
最新文章
- 理解为何用期望最大化或梯度下降等启发式方法处理非凸函数在实际中如此有效,对于理论计算机科学而言是一大挑战
- 字节 位 比特的关系
- MySQL带EXISTS关键字的子查询
- php文件在桌面删除不了图片吗,删除windows桌面上某个应用程序的图标,意味着什么...
- 静态资源存储 vs 对象资源存储
- java foreach6_Java foreach循环是否会创建一个新对象?
- 重新认识一个强大的 Gson
- 《私募证券投资基金业绩报酬指引(征求意见稿)》
- rabbitmq多个消费者_选型必看:RabbitMQ 七夕 Kafka,差异立现
- 水经注万能地图下载器的自定义瓦片导出功能
- nvidia驱动缓存能清理吗?
- r语言 svycoxph_R语言之cox回归分析
- Linux的自动装机服务器搭建(持续优化)
- mysql ndb集群_mysql的ndb集群
- Mac: 椰菜花叶和FileVault2
- DSP28335学习笔记-产生PWM波 ——从应用角度出发
- 2009年8月8号日志
- MRS 配套ARM内核单片机烧录工具使用说明(RISCV/ARM IDE)
- CDC框架之Debezium使用
- mysql高效率sql统计_SQl多表查询优化 高效率SQL语句
热门文章
- html格式标准写法,web前端HTML、CSS书写规范(必记)
- 360趋势批量查询工具
- USB Redirector(usb设备共享软件)官方正式版V6.12.0.3230 | USB共享软件下载 | usb redirector是什么软件
- Mac美术绘画软件Corel Painter 2018激活汉化教程分享
- 中国联通与用友签署合作框架协议 多领域展开全面合作
- 西门子200PLC软件的安装和使用
- java计算机毕业设计支部党建工作平台源码+mysql数据库+系统+lw文档+部署
- 【券后价14.00元】【包邮】温碧泉洗面奶女男收缩毛孔学生保湿清洁泡沫祛痘洁面乳不紧绷正品...
- 第2课:Scratchjr操作界面
- ECharts实现数据可视化超详细基础入门教程