angular 笔记

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';

<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';

providers: [ServiceService], app.module.ts里面

constructor(public store: ServiceService) { 使用的话,单独的组建也要引用
store.get();
}

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

改变子组件 或者 其他组件的样式
[ngStyle]="title" title是json 里面是样式
this.appNews.title = {
'200px',
height: '200px',
background: 'red'
};
console.log(this.appNews.title);

<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>