angular 使用笔记

ng-container 拥有不存在功能的能力:

HTML：

    
{{isMock ? "" : book.title }}
    
{{ book.author }}
    
{{ book.price }}
 

TS：

export interface booksRecord {
  title: string,
  author: string,
  price: number
}

export const books: booksRecord[] = [
  {
    title: "题目1", author: "作者1", price: 1033
  },{
    title: "题目2", author: "作者2", price: 2033
  },{
    title: "题目3", author: "作者3", price: 3033
  },
]
isMock: boolean = true;

---

$event & 参数 ：

Here we are going to emit an event and pass a parameter to the event from 子组件：

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-child',
    template: `Click me `
})
export class AppChildComponent {
    @Output() valueChange = new EventEmitter();
    Counter = 0;
    valueChanged() { 
        this.Counter = this.Counter + 1;
        this.valueChange.emit(this.Counter);
        console.log("ddd")
    }
}

父组件：

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: ``
})
export class AppComponent implements OnInit {
    ngOnInit() {
    }
    displayCounter(count) {
        console.log(count);
    }
}

---

ngOnChanges只有在输入值改变的时候才会触发，如果输入值(@Input)是一个对象，改变对象内的属性的话是不会触发ngOnChanges的。

export class StockStatusComponent implements OnChanges

 

一个好问题：怎么实现，2个组件间，在输入框输入数字，根据是否大于10来改变按钮颜色？

https://dzone.com/articles/understanding-output-and-eventemitter-in-angular

涉及的知识点：发射参数、onChanges

---

enum ScanKind {
    Axial = "轴扫"
}
function testFunction() {
    const name = "A Name";
    const scanKind = ScanKind.Axial;
    const x = {
        name: name,
        value: scanKind
    }
    return x;
    // return {
    //     name: name,
    //     value: scanKind
    // };
}

alex的表单返回 ↑

---