Learning portal -angular 7

1, install scaffolding: npm install -g @ Angular / cli

安装之后，输入命令 ng v：
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.3
@angular-devkit/core         7.3.3
@angular-devkit/schematics   7.3.3
@schematics/angular          7.3.3
@schematics/update           0.13.3
rxjs                         6.3.3
typescript                   3.2.4

2, create angular project, the command format: ng new project name
choose whether to route, and css, etc.
can be used ng new project name-install --skip , will be skipped during the installation project dependencies

3, start the project: ng serve --open

4, create component: ng the Component components G / component name
represents the creation of a component in the components file

5, fame property

  /*
    修饰符---合java基本一样
    public 默认、protected、private
  */
  public title = "这是一个title属性,lalalaaaa";

  mas = "这是一条数据msg";//默认public

  username:string = "张三";//声名属性类型

  student:any = "学生";//任意类型

  userinfo:any = {//对象
    username:"李四",
    age:18,
    sex:"男"
  }
  //集合
  list:any[] = ["111", "222", "333"]；
  items:Array<number> = [111, 222, 333]

6, the value of the label attribute binding

//使用[ ]
<div [title]="title">学生</div>

7, bound html template

content= "<h3>这是一个html标签---h3</h3>";

<div >{{content}}</div>//原样输出
<div [innerHTML]="content"></div>//会解析html在输出

8, the condition determination

<div *ngIf="flag == true">
  <img src="assets/images/t1.jpg" alt="" width="100" height="80">
</div>

<li *ngFor="let item of numlist; let key=index;">
      <span [ngSwitch] = "key">
        <p *ngSwitchCase = 0 > {{key}}--{{item}} </p>
        <p *ngSwitchCase = 1 > {{key}}--{{item}} </p>
        <p *ngSwitchDefault> {{key}}--{{item}} </p>
      </span>
</li>

9, click click event, keydown / keyup keyboard events

<button (click)="click()">点击</button>

click() {
    alert("点击了");
  }

<button (keydown)="keydown($event)">点击</button>

keydown(e) {
    if(e.keyCode = 13){
       console.log("敲击了键盘回车键")
    }
  }

10, two-way data binding, you need to import FormsModule

<input type="text" [(ngModel)]="val">
<p>输入的内容：{{val}}</p>

11, service creation: ng g service catalog / service name;
To use this service also needs to be introduced and configured in the root module, using the service also needs to be introduced in a particular module.

//引入服务
import {RequestService} from '../../services/request.service';
//声名服务
constructor(public request:RequestService) { }
//使用服务
let data = this.request.getData();

12, the callback function, Promise, and the asynchronous method rejs obtain inside data

回调：
getCallBack(cb){
    setTimeout(() => {
      var username = "张三"; 
      //return username; 外部无法接收
      cb(username);
    }, 3000);
  }

promise：
  getPromiseData (){
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        var username = "李四"; 
        resolve(username);
      }, 3000);
    });
  }

Rxjs：
getRxjsData (){
    return new Observable(observable => {
      setTimeout(() => {
        var username = "王五"; 
        observable.next(username);
      }, 3000);
    });
  }

调用：
this.request.getCallBack(callBackData => {
      console.log(callBackData);
});

this.request.getPromiseData().then(promiseData => {
      console.log(promiseData);
});

this.request.getRxjsData().subscribe(rxjsDate => {
      console.log(rxjsDate);
})

13, angular request and the get and post requests jsonp

getData(){
    let api = 'http://a.itying.com/api/productlist'
    this.http.get(api).subscribe((response:any) => {
      console.log(response);
      this.list = response.result;
    });
}

postData() {
    const httpOptions = {headers: new HttpHeaders({'Content-type': 'application/json'})}
    let api = 'http://127.0.0.1:3000/login';
    this.http.post(api, {'useename':'张三', 'age':20, 'sex':'man'}, httpOptions)
    .subscribe((res:any) => {
      console.log(res);
    });
}

//需要注入HttpClientJsonpModule
//使用jonp获取服务器数据，跨域的一种解决方案,服务器必须支持jsonp
jsonpData(){
    let api = 'http://a.itying.com/api/productlist'
    this.http.jsonp(api, 'callback').subscribe((response:any) => {
      console.log(response);
    });
}

14, using the route, app-routinh.module.ts defined

//根模块需要导入路由
//路由模块需要导入已经创建的组件
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'todoList', component: TodoListComponent},
  //默认挂载的组件
  {path: '**', redirectTo: 'home'}
];

页面路由跳转1：
//跳转到newscontent页面，并且把index传过去 
<li *ngFor="let item of list; let key = index">
    <a [routerLink]="[ '/newscontent' ]" [queryParams]="{index:key}" >{{key}}---{{item}}</a>
</li>
//跳转后对应的url：http://localhost:4200/newscontent?index=4

//获取路由传值
//如果要获取传递过去的参数，要引入ActivatedRoute
import { ActivatedRoute } from '@angular/router';
constructor(public activeRoute:ActivatedRoute) { }//声名ActivatedRoute
ngOnInit() {
    //获取路由传递过来的值
    this.activeRoute.queryParams.subscribe(data => {
      if(data.index){
        console.log('路由传值index : ' + data.index);
      }
    });
}

//页面路由跳转2：动态路由
//配置：
const routes: Routes = [
  {path: 'newscontent/:index', component: NewscontentComponent},
  //默认挂载的组件
  {path: '**', redirectTo: 'home'}
];

<ul>
    <li *ngFor="let item of list; let key = index">
      <a [routerLink]="[ '/newscontent/', key]">{{key}}---{{item}}</a>
    </li>
</ul>

//获取动态路由传值,同样需要引入ActivatedRoute
this.activeRoute.params.subscribe(date => {
      console.log(date);
});

//js动态路由跳转