angular 笔记

#### 安装Angular CLI

npm install -g @angular/cli

#### 创建新项目

ng new 项目名称

#### 启动项目

ng serve --open

#### 项目默认访问地址

localhost:4200/

#### 创建新组件

ng g c 组件名称

#### 循环渲染列表

<div *ngFor="let item of list; let key = index"></div>

#### 导入表单模块

import { FormsModule } from '@angular/forms';

#### 循环渲染列表并绑定模型 <pre> <ul> <li *ngFor="let item of yes, let index = index" [hidden]="!item.flag"> <input type="checkbox" [(ngModel)]="item.flag" (change)="change()">{{ item.title }} <span (click)="deleteH(index)">X</span> </li> </ul> #### 创建新的服务

ng g service 服务名称

#### 导入服务

import { ServiceService } from '../../service/service.service';

#### 在app.module.ts中注册服务

providers: [ServiceService]

#### 在组件中使用服务

constructor(public store: ServiceService) { 
  store.get();
}

#### 获取DOM元素

import { ViewChild } from '@angular/core';
AfterViewInit(){} // 这是vue的mouted
<div #myDiv>123</div>
@ViewChild('myDiv') myDiv;

#### 改变组件样式

[ngStyle]="title" // title是json 里面是样式
this.appNews.title = {
  width: '200px',
  height: '200px',
  background: 'red'
};
console.log(this.appNews.title);

#### 使用ngClass绑定类名

<p [ngClass]="title">news works!</p> // title变量 = 是类名
this.appNews.title = 'w200';

#### 在父组件中获取子组件内的元素标签

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('appNews', {read: ElementRef}) appNews;
this.appNews.nativeElement.getElementsByClassName('w100')[0]

#### 父组件传值给子组件

// 父组件
<app-news [title]="title"></app-news>
// 子组件
import { Input } from '@angular/core'
@Input() title: any;
<p>{{title}}</p>

#### 把父组件整体传给子组件

// 父组件
<app-news [all] = 'this'></app-news>
// 子组件
@Input() all: any
<p (click)="all.run()">222</p>

#### 父组件获取子组件的方法

// 父组件
import { ViewChild } from '@angular/core';
@ViewChild('news') news;
<app-news #news></app-news>
<p (click)="news.getRun()">
home works!
</p>

#### 循环渲染选项列表

<nz-option *ngFor="let option of edit.series_options | keyvalue" [nzValue]="option.key" [nzLabel]="option.value"></nz-option>