可重復使用的 angular 組件

Question

我在 angular 組件中有一個搜索文本框，用於搜索名稱列表。 我想把它移到一個可重用的組件中，以避免在多個頁面上重復相同的代碼。 這樣做的最佳做法是什么？ 我應該只生成一個新組件並將邏輯移到那里嗎？ 我知道有一種方法可以與 @input 裝飾執行組件交互，但我很難理解在這種情況下如何工作。 以下是 HTML 和 typescript 代碼：

<input [ngModel]="searchStr" (ngModelChange)="employeeSearch($event)" class="form-control mb-3 pl-4" type="text"
        id="employeeName" placeholder="Employee Name" name="employeeName">


  employeeSearch(searchStr: string) {
    this.searchStr = searchStr;
    // some logic
  }

Answer 1

正如您已經說過的，您只需創建一個新組件並將邏輯移到那里。 因為您希望在應用程序中擁有相同的員工列表，所以您應該向您的應用程序引入一個服務，該服務存儲/操作/等。 你的員工名單。 然后，您的組件應該使用該服務。