1 分钟带你解锁 Angular

# step one
npm install -g @angular/cli
# step two
ng new my-app
# step three
cd my-app
ng serve --open

<!-- xxxx.html -->
<h3>Current customer: {{ currentCustomer }}</h3>
<ul *ngIf="customers.length">
  <li *ngFor="let customer of customers" (click)='onClick($event)'>{{customer.name}}</li>
</ul>

/** xxxx.component.ts **/
@xxx(...)
class XXX implements XXX { 
  currentCustomer: string = '' // 可以设置初始值
  customers: XXX[] = []
  
	onClick(e: KeyBoradEvent) {
  	console.log(e)
    ...
  }
  ...
}

ng g component todo-input

<!-- 这个是父组件的模板 todo-list.xxxx.html -->
...
<section class="container">
  <!-- 这个就是我刚刚创建的组件 它的tag标签你猜猜为啥有app开头-->
  <app-todo-input (addItem)="onAddItem($event)" [title]="ToDoList"></app-todo-input>
  ...
</section>

/** todo-input.component.ts 组件 **/
import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
@Component({
  selector: 'app-todo-input', // 这里定义了上文的tag
  templateUrl: './todo-input.component.html',
  styleUrls: ['./todo-input.component.less']
})
export class TodoInputComponent implements OnInit {
  @Output() addItem = new EventEmitter<string>() // @Output 传递方法给父组件, 然后名字对应模板中的(addItem), ="(onXXX)" 是父组件class内中的方法
  @Input() title: string  // @Input 接收父级传给子的数据
  ...
  onChange(e: KeyboardEvent ...) {
    ...
   this.addItem.emit(str) // 发送事件给父组件,是不是像极了this.$emit, 就是写起来有些累...
    ...
}

// mixins.js
export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}
// main.js
import { mixins } from './mixins'
const Foo = {
  foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'