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组件，将<app-post-item> 元素添加到appComponent的模板文件（app.component.html）中就可以了。

• 生成文件名：post-item

7、事件绑定(事件名)

<button (click)="showDetail(可选)">详情</button>

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

8、值绑定 [ value ] = ""

[属性] = ‘值’

  <input type="text"  [value]="inputvalue">

9、 结构型指令

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

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

• 条件指令

<div *ngIf="hero"  >{{hero.name}}</div>

• 循环指令

<div *ngFor="let item of 数组></div>

10、输入框双向绑定

• 绑定原生事件（$event）

  (keyup)="inputChangeHander($event)"

• 接收

    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(可选)"

    <button (click)="showDetail.emit(item)">详情</button>
    

  • 子组件ts

    引入：

    import { Output, EventEmitter } from '@angular/core';
    

    输出：

     @Output() 事件名 = new EventEmitter();
    

  子组件输出事件

  • 父组件html

    <子组件 (子组件事件名) = "事件名1($event)">

  • 父组件ts（执行事件1）

    事件1(event){
        console.log(event)
        //event为传值的内容
    }
    

接收事件传值