angular权威教程(ng-book2)--第3章 Angular的工作原理

3.1 应用

1.利用angular-cli创建一个项目

1.ng new inventory_app  #创建一个新的项目
2.ng generate component product #新建一个组件

2.一个组件的构建方法

@Component({
    selector: 'single-component',
    inputs: ['name', 'age'],
    template: `
`,
})
class SingleComponent {
    name: string;
    age: number;
    constructor() { 
    }
}
// 使用

3.5.4 触发自定义事件

@Component({
    selector: 'single-component',
    outputs: ['putRingOnIt'],
    host: {"class": "item"}, // 在宿主元素上添加class为item（3.6.1）
    template: `Like it ?`
})

class SingleComponent {
    putRingOnIt: EventEmitter;
    constructor() {
        this.putRingOnIt = new EventEmitter();
    }
    liked(): void {
        this.putRingOnIt.emit("hhhh")
    }
}
// 使用
@Component({
    selector: 'club',
    template: ``
})

class ClubComponent {
    ringWasPlaced(message: string) {
    }
}

3.5.6

标记当前选中的商品

3.9 *ngFor获取当前index

    
      {{ name }}
      {{i < (product.department.length-1) ? '>' : ''}}
    

3.10 创建NgModule并启动应用

@NgModule({
  declarations: [ 
    InventoryApp,
    ProductImage, 
    ProductDepartment, 
    PriceDisplay,
    ProductRow,
    ProductsList
  ],
  imports: [ BrowserModule ],
  bootstrap: [ InventoryApp ]
})
class InventoryAppModule {}
// 启动应用
platformBrowserDynamic().bootstrapModule(InventoryAppModule);

第4章 内置指令

4.2 ngIf

4.3 ngSwitch

    
var is A
    
var is something else

4.4 ngStyle

    uses fixed yellow background

另一种写法

4.5 ngClass

// 是否添加某个类

或
 // classObj = {bordered: true}
// 添加类的集合
 // classList = ['red', 'round']

4.6 ngFor

4.7 ngNonBindable