一、基本语法

一、双向数据绑定

1-1 app.module.ts中配置

import {FormsModule} from '@angular/forms'
imports: [
    BrowserModule,
    FormsModule
  ],

1-2 组件中使用

<input type="text"
 [(ngModel)]="msg">

二、(change)

<input type="text"
(change)="handleChange($event)"
 [(ngModel)]="msg">
handleChange(e){
    console.log(e.target)
  }

三、(ngModelChange)

只要ngModel依赖的值改变的时候,就会触发 ngModel一定要写在ngModelChange的前面

<input type="text"
 [(ngModel)]="msg"
 (ngModelChange)="handleChange()"
 >
<p>{{msg}}</p>
<input type="checkbox" 
[(ngModel)]="checked"
(ngModelChange)="inputChange()"
>

四、ant-design

4-1 自动构建

ng add ng-zorro-antd

五、发送http

5-1 app.module.ts配置

import {HttpClientModule} from '@angular/common/http'
imports: [
    BrowserModule,
    HttpClientModule
  ],

5-2 在发送http请求的组件中配置HttpClient,作为构造函数的参数设置

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'
...
export class ContentComponent implements OnInit {
  public list:any
  constructor(public http:HttpClient) { }
  ngOnInit() {
    var url:string = "http://192.168.14.15:5000/top/playlist";
    this.http.get(url).subscribe(res=>{
      this.list = res["playlists"];
    })
  }
}

六、父子组件传值

一、父组件给子组件传参

6-1 在父组件中,子组件通过属性接收父组件传递过来的参数

<app-header [title]="title"></app-header>

export class AppComponent {
  title:string = '我你爸爸';
}

6-2 子组件中引入Input模块

import { Component, OnInit,Input } from '@angular/core';
...
//3.子组件中 @Input 接收父组件传过来的数据
export class HeaderComponent implements OnInit {
  @Input() title:string;
  constructor() { }
  ngOnInit() {
  }
}
//4.子组件中使用父组件的数据
<p>{{title}}</p>

二、子组件给父组件传参

//1.子组件通过属性接收父组件的方法
<app-header  [run]="run"></app-header>
export class AppComponent {
  run(id:string){
    console.log(id);
  }
}

//2.子组件@Input接收,调用
export class HeaderComponent implements OnInit {
  @Input() run:any;
  ...
  handleClick(){
    this.run("1234")
  }
}

<button (click)="handleClick()">向父传参</button>

七、子组件通过@Output向父组件传参 —了解

// 泛型:任意类型
class Person<T>{
    emit(msg:T){
        console.log(msg);
    }
}
var p = new Person<string>();
p.emit("hello world")
//2-1 子组件引入Output和EventEmitter
import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
//2-2 子组件中实例化EventEmitter
@Output() private outer = new EventEmitter<string>();
//2-3 子组件中通过EventEmitter实例化的对象outer,广播数据
handleClick(){
    this.outer.emit("101001");
}
<button (click)="handleClick()">向父传参</button>
//2-4 父组件中接收事件
<app-header  (outer)="getId($event)"></app-header>
export class AppComponent {
  getId(id:string){
    console.log(id);
  }
}