Angular8入门

angular cli 初始化项目

# 全局安装 angular cli 
cnpm install -g @angular/cli
# 创建 新 cli
ng new XXX  -y
# 初始化项目
cnpm install 
# 启动项目
npm start

1.命令行 创建组件

# 创建类型 跟  目录
ng g component components/news

赋值 与 绑定

# 绑定 值 
<div>{{value}}</div>;
# 绑定 属性
<div [title]="msg" >{{value}}</div>;
# 绑定 HTML
<div [innerHTML]="msg" ></div>;

循环数组

public arr:any[] = [111,222,333]
public arr:Array<any> = [111,222,333]
<ol>
<li  *ngFor="item in arr key=index ">{{item}}</li>
</ol>
# key =index  获取索引值

条件渲染

<div *ngIf="flag">
    <img src="assets/img/c.png">
</div>


<span [*ngSwitch]="orderStatus">
    <p *ngSwitchCase="1">支付</p>
    <p *ngSwitchDefault>无效</p>
</span>

class 绑定

<div [ngClass]="{'className':true}">class绑定</div>

style 绑定

<div [ngStyle]="{'color':'red'}">class绑定</div>

管道化

<p>{{date | date:'yyy-MM-dd HH:mm:ss '}}</p>

事件

<button (click)="run" >click me</button>

双向数据绑定

# app.module.ts 文件 引入 FormsModule  模块 imports 中载入
import { FormsModule } from '@angular/forms';
imports: [
    BrowserModule,
    FormsModule
  ],

 # HTML
<input type="text" [(ngModel)]="keywords">

{{keywords}}

server 类似于 vuex , redux 命令行 创建 服务

# 创建服务
ng g service services/storage

#  app.module.ts  引用服务
import { AppCimponent } from 'services/storage.service';
providers: [AppCimponent]

# html
import { storageService } from '../../services/storage.service';

constructor(public storage:storageService){
    let s = storage.get()
}

父组件给 子组件传值

# 父组件
<chrile [title]="title" [run]="run" ></chrile>


#子组件
import {Input } from '@/angular/core';
@input title:string;
@input run:any;

this.run()
console.log(this.title)

子组件 给父组件 传值

#子组件向 父组件 发送广播
# 与 vue 子组件给父组件传值类似
import { output , eventemitter } from '@angular/core';

@output() private outer = new eventemitter()

this.outer.emit('1234')

#父组件监听

<div (outer) ="run($event)"></div>

function run (data){
    
}