开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情
组件通信
1.父组件通过子组件标签出攒底属性
2.子组件在内部声明@Input接收
input是单向的
父组件如果把数据改了,子组件也会更新
@Output的本质就是事件机制,可以利用它来订阅子组件上发布的事件,在父组件中订阅处理
3.父组件直接访问子组件public成员,对于有直接父子关系的组件,父组件可以直接发昂文子组件里面的public型的属性和方法
在父组件的内部可以访问到子组件的实例,需要用到@ViewChild装饰器
组件生命周期8个钩子
ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOndestroy()
没有组件或者指令实现全部钩子
Content和View相关的4个钩子支队组件有效,指令上不能使用
新版Angular中,指令不能带有HTML模板,指令没有ui
angular指令
指令分为两种 属性型指令和结构型指令
NgClass: 添加或移除一组CSS类
NgStyle: 添加或移除一组CSS样式
NgModel: 双向绑定到html表单元素
NgIf: 根据条件添加或移除DOM
也可以通过类绑定或者烟格式绑定来显示或隐藏一个元素
NgSwitch根据条件渲染多个选项中的一个
NgFor 列表渲染
angular@cli,windows平台安装报错
npm i g cnpm --registry=registry.npm.taobao.org
cnpm i g @angular/cli
安装失败,手动把全局的@angular/cli删掉 cnpm uninstall -g @angular/cli
node_module删不掉,路径过长,用文件粉碎机
node-sass模块安装不上使用cnpm
windows上安装需要依赖python环境 vs环境
angular@cli创建项目
angular cli 会自动创建好目录结构,并且生成目录文件
ng new my-app
angular cli 在自动生成好项目骨架之后,会立即自动使用npm来安装所依赖的node模块
ctrl+c终止,进入初始化的项目根目录使用cnpm来安装
项目完成之后可以开启开发模式
npm start
或者npm serve
!要在根目录下执行,该命令默认只会开启一个服务占用4200端口,修改端口可以通过--port指定
ng serve --port 3000
