Angular新手村第二关

1. 基本指令

// 1.用来渲染一个值，跟vue一样
// {{ name }} 

// 2. for指令用来渲染一个数组列表
// *ngFor="let item of list"  相当于vue的  v-for="item in list"

// 3. if指令判断显示隐藏 
// *ngIf="false"  相当于vue的  v-if="false"

// 4. 标签属性动态赋值 
// <component [title]="title"></component> 相当于vue的 :title="title"

2. 绑定方法

// 例如给一个button绑定一个点击事件
<button (click)="myClick()">按钮</button>

// 事件方法则写在xxx.components.ts中
export class xxxComponent {
    myClick() {
        ...
    }
}

 3. 父子组件传值

// 子组件
// 1.在xxx.component.ts中定义属性及方法，需要使用2个装饰器和1个事件实例
import { ..., Input, Output, EventEmitter } from '@angular/core';

// 2.需要在class中定义
    // 属性
    @Input() title: Type;        // Type是ts类型
    // 方法
    @Output() myEvent = new EventEmitter()



// 父组件
<component [title]="title" (myEvent)="myevent()"></componet>