![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular8
_taylorZ
成就感源于克服困难,要自信,仰望星空,脚踏实地
展开
-
9父子组件之间通讯
1:父组件传给子组件1) 父组件给子组件传值步骤如下:a. 父组件调用子组件时传入数据比如定义两个组件home和head,父组件home里定义数据str,home组件调用head组件时:<app-head [data]="str"></app-head>b. 子组件引入input模块import { Component, OnInit,Input} from...原创 2019-10-11 21:22:39 · 231 阅读 · 0 评论 -
4常用指令
1)循环遍历*ngFor后台数据:arr:any[]=["Angular",2019,true,"typeScript"]前台:<ol> <li *ngFor="let i of arr"> {{i}} </li></ol>2)ngClass<!--将gray设为false,green设为true,那么c...原创 2019-08-20 21:46:57 · 162 阅读 · 0 评论 -
3数据绑定
1)在component.ts的OnInit里声明变量,在component.html里通过{{}}使用比如在head组件里定义数据,在head.component.ts文件的OnInit方法里定义:i="我是数据"; //不用写var然后在head.component.html里使用即可{{i}} 2)在component.html里通过标签属性title使用静态数据<div ...原创 2019-08-20 22:36:48 · 165 阅读 · 0 评论 -
5双向数据绑定
Angula中双向数据绑定只适用于表单,即视图改变会影响模型,模型改变会影响视图。要想使用双向数据绑定,首先要在app.module.ts里引入FormsModuleimport {FormsModule} from "@angular/forms";引入后还要在@NgModule的imports里声明FormsModule然后就可以使用了,比如<input type="text"...原创 2019-08-25 10:22:32 · 192 阅读 · 0 评论 -
1、Angular8环境搭建以及项目创建
前段时间要求学习Angular,想着先学Angular JS,很老的,被说现在8都出来了,于是赶紧学8,Angular1和2变化比较大,后面就比较稳定了,那就学新的吧,在公司学习,记下笔记然后回家再整理,方便巩固和复习一:环境1:安装node.js建议安装最新的稳定版本安装好node.js后,cmd里执行 node -v 可以看到安装的版本,node.js安装好后,会自动安装npm,...原创 2019-08-15 21:11:30 · 5088 阅读 · 0 评论 -
2Angular项目文件以及组件
一、项目文件结构创建好Angular项目后,用VS打开项目文件夹,文件目录是这样的目前只用关注这些文件就好: 1:package.json 配置文件 2:src/app 根组件,根模块 3:src/assets 静态资源文件 4:index.html html入口文件 5:main.ts 整个项目的入口 6:style.css 公共样式文件 7:test.ts 测试入口文件...原创 2019-08-17 17:32:19 · 339 阅读 · 0 评论 -
6服务
Angular中组件之间是无法相互调用方法的,比如root组件调用search组件和toDoList组件,在toDoList组件里定义一个方法: fun() { alert("调用toDoList组件里的方法"); }然后在三个组件的html里分别定义按钮事件绑定该方法,会发现只有toDoList组件可以调用 那么如果要定义公共的方法怎么办呢?那就可以定义服务了。1:创...原创 2019-08-30 20:15:10 · 186 阅读 · 0 评论 -
7搜索历史记录和ToDoList的数据持久化的实现
c原创 2019-08-31 18:14:59 · 383 阅读 · 0 评论 -
8Angular中Dom操作:ViewChild,实现CSS3动画
1:ngAfterViewInit 通过原生JS获取dom都是在dom加载完成后获取,Angular中也一样,那么Angular中在哪里获取呢?应该在ngAfterViewInit里操作,关于详细信息可以看官方文档Angular生命周期函数,在ngOnInit里获取有时会失败的,不妨测试一下。 &nbs...原创 2019-09-15 10:26:52 · 702 阅读 · 0 评论