angular自学笔记一

一、显示数据 

显示数据的几种类型

双花括号{{value}}为插值显示；里面也可写一些计算

双花括号

中括号[target]一般是动态更改属性内容；属性名加上方括号后，右侧赋值为表达式的值

属性动态绑定

小括号(target)是事件绑定，具体请看（二、事件绑定）

二、事件绑定

Angular 的事件绑定语法由等号左侧带圆括号或者等号左侧带on-的目标事件和右侧引号中的模板语句组成

通过(click) = "clickBind('参数')" 或者on-click = "clickBind('参数')"

事件举例

三、新建组件

子组件案例

上图中，OnInit表示一个生命周期钩子，它会在 Angular 初始化完了该指令的所有数据绑定属性之后调用。

app-my-component表示调用时的标签名称。

写好一个组件文件之后，应该在app.module.ts进行初始化，如下

组件初始化

declarations表示属于该模块的一组组件、指令和管道（统称可声明对象）；具体详见（https://angular.cn/api/core/NgModule）

使用方式

在父组件中调用；其中#myComponent是自定义子组件的名称。

angualr组件插槽

在子组件中ng-content标签是调用时自定义内容的位置；select的值可以是类命class,可以是id,可以是标签，也可以是组件的name名称；下图为调用方式

布局位置由子组件中的位置决定

组件的属性定义，通过子组件中引用@input

组件定义属性 父组件使用子组件定义的属性 父组件调用子组件的变量

父组件的html文件通过在子组件标签定义一个名称，如上图的#myComponent，然后直接通过myComponent进行调用，调用的变量必须是子组件中公开的变量。

父组件ts文件通过ViewChild和自定义的名称进行调用数据，如下图

父组件ts文件调用子组件内容 （‘myComponent’）是引用时自定义的名称  

子组件自定义事件，通过Output声明一个EventEmitter事件的变量，然后通过执行某一事件

子组件自定义事件 父组件使用子组件的自定义事件 父组件获取子组件事件返回值

四、依赖注入

通过@Injectable声明一个服务类内容，class类内自定义需要注入的变量内容

新建服务文件

新建好一个服务后，在app.module.ts的providers中进行注入器中，

注入服务 组件中使用注入的服务 使用服务