testss

生命周期

constructor 只调用一次
在 es6 中的 class 初始化对象的时候,constructor 会立即被调用。:
constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor来初始化类。
angular中的组件是基于class类实现的,constructor用来做依赖注入。

ngOnChanges  多次调用, 首次调用发生在组件初始化时, ngOnInit之前
当我们有外部参数更改的时候,我们就会执行 ngOnChanges,也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。
简单说,父组件绑定子组件中的元素,会触发这个钩子函数,可以多次触发。这在下面的 ngOnInit 总会介绍。
当通过 @Input 将值传递给子组件 demo 的时候,就会触发 demo 组件中的 ngOnChanges。
当 @Input 传递的属性发生改变的时候,可以多次触发 demo 组件中的 ngOnChanges 钩子函数。

ngOnInit	只调用一次
这个方法调用的时候,说明组件已经初始化成功。在第一次 ngOnChanges() 完成之后调用,且只调用一次。

ngDoCheck	多次调用
当发生变化检测的时候,触发该钩子函数。
这个钩子函数,紧跟在每次执行变更检测时候 ngOnChanges 和首次执行执行变更检测时 ngOnInit 后面调用。
这个钩子函数调用得比较频繁,使用成本比较高,谨慎使用
一般使用 ngOnChanges 来检测变动,而不是 ngDoCheck

ngAfterContentInit 	只调用一次
当把外部的内容投影到内部组件,第一次调用 ngDoCheck 之后调用 ngAfterContentInit,而且只调用一次。

ngAfterContentChecked	多次调用
ngAfterContentChecked 钩子函数在每次 ngDoCheck 之后调用.

ngAfterViewInit		只调用一次
视图初始化完成调用此钩子函数。在第一次 ngAfterContentChecked 之后调用,只调用一次。
这个时候,获取页面的 DOM 节点比较合理

ngAfterViewChecked	多次调用
视图检测完成调用。在 ngAfterViewinit 后调用,和在每次 ngAfterContentChecked 之后调用,也就是在每次 ngDoCheck 之后调用。

ngOnDestroy		只调用一次
组件被销毁时候进行的操作。
在这个钩子函数中,我们可以取消订阅,取消定时操作等等。

语言表达

装饰器

一、类装饰器:

装饰器/注解就是一个函数,但它是一个返回函数的函数,它属于Typescript的特性,而非Angular的特性。
@NgModule 模块装饰器(帮把相关的一些代码逻辑组织在一起) NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。每个Angular应用都有一个根模块,通常命名为AppModule
@Component 组件装饰器 组件可以认为是屏幕上的一个视图. 组件定义视图。每个Angular应用都至少有一个组件,也就是根组件
@Injectable 依赖装饰器(把一个类定义为服务) 组件使用服务。对于与特定视图无关并希望跨组件共享的数据或逻辑,可以创建服务类。
@Pipe 管道装饰器 管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)
@Directive 指令装饰器 用来控制组件的某些行为

二、属性装饰器:

装饰器 解释 备注

@Input 属性绑定(父组件向子组件传递数据)
@Output 事件绑定(子组件想父组件传递数据的同时触发事件)
@HostBinding 为宿主元素添加属性值
@HostListener 为宿主元素添加事件
@ContentChild 用于选择当前组件引用的内容(从ng-content中获取元素) 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取
@ContentChildren 同上(不过是尽可能多的匹配,有多少匹配多少) 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取
@ViewChild 从模板视图中获取匹配的元素(匹配到满足条件的第一个) 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取
@ViewChildren 同上(不过@ViewChildren是尽可能多的匹配,有多少匹配多少) 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取

指令

NgClass 添加和删除一组 CSS 类
NgStyle 添加和删除一组 HTML 样式
NgModel 将数据双向绑定添加到 HTML 表单元素
NgIf 从模板中创建或销毁子视图
NgFor 为列表中的每个条目重复渲染一个节点
NgSwitch 一组在备用视图之间切换的指令
1.ng-app 初始化Angular JS应用程序
2.ng-bind 绑定HTML元素到程序中
3.ng-init 初始化数据
4.ng-model 绑定控制器中的值到应用数据中
5.ng-repeat 定义集合中每项数据的模板
6.ng-src 指定img元素的src属性
7.ng-class 指定HTML元素使用的css类
8.ng-disabled 规定一个元素是否被禁用,参数是布尔值
9.ng-readonly 规定一个元素的只读模式,参数是布尔值
10.ng-checked 规定元素是否被选中,多用于单选和多选中,相当于默认选中,参数是布尔值
11.ng-selected 下拉列表中的默认选中,参数是布尔值
12.ng-click 元素被点击时的行为,参数是执行后的表达式
13.ng-dblclick 元素被双击时的行为,参数是执行后的表达式
14.ng-mouseenter 鼠标移入元素发生的行为,参数是执行后的表达式
15.ng-mouseleave 鼠标移出元素发生的行为,参数是执行后的表达式

跨域问题

前端web部署的服务器和后端提供服务API不在同一个域名下,就会产生跨域问题
目前学习的不多,尚未遇到这个问题,还没有具体的了解。

依赖注入

Angular的依赖注入(Dependency Injection,简称DI)是一种设计模式,用于管理和解决组件之间的依赖关系,并提供了一种简洁的方式来引入和使用外部依赖。
在Angular中,依赖注入的原理是通过使用@Injectable装饰器来标记服务类,然后在需要使用这些服务的组件中通过构造函数参数来声明依赖。Angular会自动解析并实例化这些依赖,并将它们传递给组件的构造函数。
以下是一个简单的例子:
首先,我们定义一个服务类:
@Injectable()
export class DataService {
getSomeData() {
return ‘这是一些数据’;
}
}

然后,在组件中注入这个服务.
@Component({
selector: ‘app-example’,
template: <h1>{{ data }}</h1> ,
})
export class ExampleComponent {
constructor(private dataService: DataService) {}

ngOnInit() {
this.data = this.dataService.getSomeData();
}
}

在上面的代码中,ExampleComponent依赖于DataService服务。通过在构造函数中声明一个私有的dataService参数,并使用@Injectable装饰器标记DataService类,Angular会自动实例化DataService,
并将它传递给ExampleComponent的构造函数。然后,我们可以在ExampleComponent中通过this.dataService来使用DataService的方法。
需要注意的是,在使用依赖注入时,我们还需要在模块中声明提供者,以便Angular知道如何创建和提供这些依赖。可以通过在@NgModule装饰器中的providers属性中添加提供者来完成这一步。
希望这个解答能对你有所帮助。

数据绑定方式

当一个组件中的属性或者模板中的表达式发生变化时,Angular会创建一个变更检测器,并且在组件的变更检测树中遍历所有的子组件和指令,检测它们的属性是否也发生了变化。
如果发生了变化,那么Angular会通过变更检测器更新视图。

在Angular中,所有的数据绑定都是通过Observable实现的,当一个属性被绑定到一个表达式时,Angular会在这个属性上创建一个可观察对象,并且在这个对象上注册一个观察者,
当这个属性的值发生变化时,会通知所有的观察者。
另外,Angular还使用Zone.js来实现变更检测的自动化。Zone.js是一个JavaScript库,可以用来监视异步操作,并且在异步操作完成后自动运行变更检测器。
这样,当一个异步操作(例如一个HTTP请求)完成后,Angular会自动检测组件的变化并更新视图。
总结来说,Angular的双向数据绑定基于Observable和Zone.js实现,可以自动监测属性的变化,并且自动更新视图,使得开发者可以更加专注于业务逻辑的实现,而不需要手动更新视图。
Angular的双向数据绑定是通过将模型层和视图层连接起来实现的。当模型层的数据发生改变时,视图层会自动更新;反之亦然。
以下是双向数据绑定的底层原理:
双向数据绑定使用了Angular的脏检测机制,该机制会在每个循环周期中检查模型层和视图层之间的差异,并更新相应的部分。
Angular使用了zone.js库来拦截异步操作。当Angular捕获到异步操作时,它会触发脏检测机制并更新视图层。
双向数据绑定是通过指令实现的。Angular提供了一些内置指令,例如ngModel和ngBind,它们可以轻松地实现双向数据绑定。
在底层,Angular使用了一些核心组件来处理双向数据绑定。其中最重要的是Compiler和ComponentFactoryResolver。Compiler负责编译组件模板,而ComponentFactoryResolver则负责创建组件工厂。
当Angular启动时,它会解析所有的指令和组件,并生成一个组件树。这棵树包含所有的组件、指令和管道等元素,以及它们之间的关系。
当用户输入数据时,ngModel指令会将数据写回到模型层。此时,Angular会检测到数据的变化,并触发脏检测机制。
脏检测机制将比较模型层和视图层之间的差异,并根据需要更新视图层。这个过程是递归的,即如果一个组件的数据发生了变化,则它的子组件也会被更新。

es6 的新特性

let、const块级作用域声明方式。同var相比两个不同。块级作用域能够屏蔽var的变量提升,将变量的生命周期局限在块中。本质讲,let、const声明在作用域外无法访问的变量。
ES6中添加了对类的支持。class在JS中一直是保留字。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。
现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
静态(static)方法
参数默认值
现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
模板字符串
使用反引号代替了单双引号 let str = ,反引号里面可以写字符串,或者HTML元素
用于变量拼接,使用${变量名}的固定形式进行拼接

作用域

也就是变量相关的
什么是scope作用域?
scope作用域是一个指向应用model的对象object,也是表达式的执行环境。
作用域有层次结构,有根作用域,有很多子作用域,根据位置不同而不同。

全局作用域是所有controller的scope的桥梁。
rootscope定义的值,可以在各个controller中使用。
经常用于需要在多个页面场景中的数据就可以定义到全局作用域上。
每一个angular应用有且只有一个root scope,但可以拥有多个child scope。

C#

namespace

命名空间的设计目的是提供一种让一组名称与其他名称分隔开的方式。在一个命名空间中声明的类的名称与另一个命名空间中声明的相同的类的名称不冲突。
我们举一个计算机系统中的例子,一个文件夹(目录)中可以包含多个文件夹,每个文件夹中不能有相同的文件名,但不同文件夹中的文件可以重名。

using

using 关键字表明程序使用的是给定命名空间中的名称。例如,我们在程序中使用 System 命名空间,其中定义了类 Console。
您也可以使用 using 命名空间指令,这样在使用的时候就不用在前面加上命名空间名称。该指令告诉编译器随后的代码使用了指定命名空间中的名称。下面的代码演示了命名空间的应用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值