# Angular 待整理

# 物件導向

interface介面，定義方法、類別，不能被new物件

class 可以被new一個物件

繼承的話，實作時一定要滿足interface的所有方法

new Interface Instance

          let typeData = <ITypeData>{
            typeName: dessertTypes.chinese,
            typeStatus: dessertTypes.status
          };
          
          ...
          
          
          
export interface ITypeData{
  typeName: string;
  typeStatus: number;
}

# global local

就算沒有`angular cli`，
只要在專案中 `npm install` 也能跑得動專案
local的在node_modules

[Angluar 版本衝突](https://www.itread01.com/content/1545832266.html)

### router
取網址參數
route.snapshot.paramMap

## ng new vs generate

https://stackoverflow.com/questions/52778540/difference-between-ng-generate-application-app-name-and-ng-new-app-new

## template中判斷物件是否為空

`(previous_info | json) != '{}' works only for {} empty case, not for null or undefined case`

`<div *ngIf="(previous_info | keyvalue)?.length">
`

https://stackoverflow.com/questions/37111005/how-to-check-empty-object-in-angular-2-template-using-ngif

# Angular 元件生命週期

## 建構式 constructor

`constructor(){}`

建構式，在Class建立時第一個執行的程式碼
也就是當執行時，此時Component還沒有被初始化，
(父元件傳進來的資料此時也還沒初始化 父元件也還沒初始化?)
所以幾乎不會寫任何程式碼在裡面

相依注入

## Hook

### 被改變 ngOnChanges

觸發的時機點:
若屬性有套用input binding，當父元件透過屬性繫結傳資料進來就會被觸發一次。
第二個執行的程式碼

### 初始化 ngOnInit

`ngOnInit(){}`

初始化執行
此時屬性繫結已經做完了

可以做設定預設值、向Server要資料

export class AppComponent implements OnInit{
    data; // 定義屬性
    ngOnInit(): void {
        this.data = [...]; // 存取類別的屬性
    }
}

### 被摧毀 ngOnDestroy

`ngOnDestroy(){}`
被父元素摧毀之前要做的事情
OnDestroy很少用到，Angular會自動回收記憶體，不須特別清空物件、屬性，除非是清除RxJS(非同步訂閱)

export class AppComponent implements OnInit, OnDestroy{
    ngOnDestroy(): void {
    }

    ngOnInit(): void {
    }
}

# Angular 型別

## 幾種取值方式

TS

export class AppComponent {
    data = [
        {id: 1, obj: {num: 10}},
        {id: 2, obj: {letter: 'b'}},
        {id: 3, obj: {string: 'abc'}},
    ];
}

HTML

<div class="container" *ngFor="let item of data">
    <div>{{item.obj.num}}</div>
    <div>{{item.obj['letter']}}</div>
    <div>{{$any(item).obj.string}}</div>
</div>

## debug技巧

HTML

(keyup.enter)="ppp($event)"

TS

 ppp(event:any){
     console.log(event)
 }

# ngModal ngbModal

## 寫在同一個Component

透過template樣板方式呼叫




## 父呼叫子Component Modal

#### 父元件 `NgbModal`



如果指定modal不可被鍵盤、滑鼠關閉

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});

https://stackoverflow.com/questions/20286445/how-do-i-prevent-angular-ui-modal-from-closing

https://stackoverflow.com/questions/41438160/stop-closing-the-modal-by-clicking-backdrop-or-outside-the-modal