Angular入门基础

angular中文网...

一、angular2基础使用

1、安装angular

npm i @angular/cli -g

安装完成提示：

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No

是否联系Angular团队--N

2、创建项目

ng new myapp --skip-install

? Would you like to add Angular routing? No
是否要添加路由？
? Which stylesheet format would you like to use? CSS
要使用哪种样式？
- css
- sass
- scss
- less
- Stylus

3、使用yarn下载包

npm i yarn -g

切换路径安装：

yarn install

4、运行项目

ng serve

5、关闭tslint.json（代码检测）

"defaultSeverity": "none"

6、新建组件

ng generate component 组件名

• 驼峰命名：postItem

在post-item组件的类文件（post-item.component.ts）中selector（组件的选择器）中的：“app-post-item”就是这个heroes组件的元素选择器，所以显示heroes组件，将 元素添加到appComponent的模板文件（app.component.html）中就可以了。

• 生成文件名：post-item

7、事件绑定(事件名)

详情

showDetails(可选) {
    console.log('点击了',可选)
  }

8、值绑定 [ value ] = ""

[属性] = ‘值’

9、 结构型指令

结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。

星号（*ng）被放在指令的属性名之前。

• 条件指令

{{hero.name}}

• 循环指令

  
  
 
接收
 
  inputChangeHander(e) {
    const item = e.target.value
    this.inputvalue = item
  }
 
 
  
 
11、组件之间通讯（传值）
 
 
 
  
 
父组件传子组件
 
   
 
    
 
父组件html
 
<子组件 [属性]="值"/>
 
 
    
 
子组件ts
 
引入：
 
import { Input } from '@angular/core';
 
输入：
 
export class ListItemComponent implements OnInit {
// @Input() 属性名 获取父组件的值
  @Input() listitem
  
  constructor() { }
  ngOnInit(): void {
  }
}
 
 
   
 
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    父传子 
  
 
 
 
 
 
  
 
子传父
 
   
 
    
 
子组件html
 
(事件) = "事件名.emit(可选)"
 
详情
 
 
    
 
子组件ts
 
引入：
 
import { Output, EventEmitter } from '@angular/core';
 
输出：
 
 @Output() 事件名 = new EventEmitter();
 
 
   
 
   
 
    
 
     
  
     
 
    
 
    

      子组件输出事件 
    
 
   
 
   
 
    
 
父组件html
 
<子组件 (子组件事件名) = "事件名1($event)">
 
 
    
 
父组件ts（执行事件1）
 
事件1(event){
    console.log(event)
    //event为传值的内容
}
 
 
   
 
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    接收事件传值