---
# System prepended metadata

title: Angular 待整理

---

# Angular 待整理



# 物件導向

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

class 可以被new一個物件

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



new Interface Instance
```typescript=
          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要資料

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

### 被摧毀 ngOnDestroy

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


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

    ngOnInit(): void {
    }
}
```


# Angular 型別


## 幾種取值方式

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

HTML
```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
```html=
(keyup.enter)="ppp($event)"
```

TS
```typescript=
 ppp(event:any){
     console.log(event)
 }
```


# ngModal ngbModal

## 寫在同一個Component

透過template樣板方式呼叫

![](https://i.imgur.com/jBvkxyX.png)

![](https://i.imgur.com/InYa2Wr.png)

![](https://i.imgur.com/ZKOT8jU.png)


## 父呼叫子Component Modal

#### 父元件 `NgbModal`
![](https://i.imgur.com/LuxOh8J.png)

![](https://i.imgur.com/cKi7zAs.png)

![](https://i.imgur.com/09lnTZH.png)

如果指定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

