###### tags: `Angular`
# 🥔共用元件之 Modal 怎麼用

本章節主要的目的為:
1. 透過應用 Modal 元件，更加熟悉 RxJS、泛型。
2. 認識共用元件。

## 泛型
[TypesScript-Generics](https://www.typescriptlang.org/docs/handbook/generics.html)
型別對於 TypeScript 這類強型別的程式語言來說十分重要，因此一般在撰寫上，我們也會習慣在參數及方法上設定相對應的型別。

money: number;

getMoney(): number {
    return this.money;
}

但即使我們保有良好的撰寫習慣，大部分的狀況我們也能設定正確型別，但開發時總是會遇到例外，那往往在遇到不確定的型別時不管怎樣一開始總是先給 `any` 。

value: any;
getValue(value: any): any {
    return value;
}

但等專案越來越豐富後會發現，因為自己行別都給 any 失去了我們使用強型別的優勢了，因此在定義方法時，最好我們還是要給型別。

getValue<T>(value: T): T {
    return value;
}

:::success
強型別可以幫助我們在撰寫的時候，避免掉很多不避要錯誤
:::

## 完整程式碼
==modal.component.html==

<h1>🥔共用元件之 Modal 怎麼用</h1>

<h2>繼承 BasicModal 自己實作開窗</h2>
<button (click)="onClickAlert()">Alter</button>
<hr>

<h2>提供 Dynamic 使用既有的元件來組合 </h2>
<button (click)="onClickDynamic()">Dynamic</button>

==modal.component.ts==

import { DynamicModalService } from './dynamic/dynamic-modal.service';
import { AlertComponent } from './alert/alert.component';
import { InputComponent } from './../component/input/input.component';
import { DynamicComponent } from './dynamic/dynamic.component';
import { ModalService } from './common/modal.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {

  constructor(
    private modal: ModalService,
    private dynamicModalService: DynamicModalService
  ) { }

  ngOnInit(): void {}

  onClickAlert() {
    const modal_alert = this.modal.getModal(AlertComponent);
    this.modal.showModal(modal_alert);
  }

  onClickDynamic() {
    const modal_dynamic = this.modal.getModal(DynamicComponent);
    const pageComponent = this.dynamicModalService.getPagePipe();
    modal_dynamic.setting = [pageComponent._header, pageComponent._body];

    pageComponent._header.create.subscribe((header) => {
      header.modalID = modal_dynamic.id;
      header.title = '標題';
    })

    this.modal.showModal(modal_dynamic);
  }
}