Angular 5結構指令

Question

我正在嘗試創建一個可重用的搜索框組件，目前我的設置是這樣。

search.component.html

<div class="search-box-container">
  <fa-icon class="search-icon" [icon]="faSearch"></fa-icon>
  <input type="search" name="search" class="search-box" autocomplete="off" />
</div>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { faSearch } from '@fortawesome/free-solid-svg-icons'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  faSearch = faSearch;
  constructor() { }

  ngOnInit() {
  }

}

我想跨多個組件使用它，如下所示：

<app-search [ngModel]="searchString" (onUpdate)="updateSearch"></app-search>

我的問題是如何訪問結構化組件內部主要組件中的父ngModel和onUpdate集。

Answer 1

根據@Stanisalv在評論中回答：

在主組件中，您只需使用@Output裝飾器將其綁定到搜索組件的公共屬性。