Javascript 仅在双击“角度”中的“单击”事件时更新零部件

在我的Angular项目中，我创建了一个带有按钮的搜索框，以从另一个组件获取搜索结果。我的应用程序组件中有一个路由器出口，我使用搜索值变量将路由器出口切换到搜索结果组件。我使用服务在组件之间共享这个搜索值变量。因此，当我点击html中的链接时，路由器出口将出现。当我点击搜索输入并进行搜索时，搜索结果将出现。我的问题是，当路由器出口被激活时，我必须点击两次搜索按钮或按两次回车键，以显示搜索结果

代码-

search.component.ts:

export class SearchComponent implements OnInit {

  value: string;

  constructor(private data: SendDataService){}

  show: boolean = true;

  showEl(){
    this.show = true;
  }

  newValue() {
    this.data.changeValue(this.value)
    this.show = false;
  }

  ngOnInit(): void{
    this.data.currentValue.subscribe(value => this.value = value)
  }
}

<input type="text" [(ngModel)]="value" (click)="showEl()" (keyup.enter)="newValue()" (input)="showEl()">
<button (click)="newValue()">Search</button>

export class SearchResultComponent implements OnInit {

  _postsArray: = //JSON Object;
  value: string = "";
  filterarray: any[] = [];

  constructor(private data: SendDataService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname.title)
    }
  }

    ngOnInit(): void{
    this.getData();
  }

}

<div>
    <div *ngIf="!value">
        <router-outlet></router-outlet>
    </div>
    <div *ngIf="value">
        <app-search-result></app-search-result>
    </div>
</div>

search.component.html:

export class SearchComponent implements OnInit {

  value: string;

  constructor(private data: SendDataService){}

  show: boolean = true;

  showEl(){
    this.show = true;
  }

  newValue() {
    this.data.changeValue(this.value)
    this.show = false;
  }

  ngOnInit(): void{
    this.data.currentValue.subscribe(value => this.value = value)
  }
}

<input type="text" [(ngModel)]="value" (click)="showEl()" (keyup.enter)="newValue()" (input)="showEl()">
<button (click)="newValue()">Search</button>

export class SearchResultComponent implements OnInit {

  _postsArray: = //JSON Object;
  value: string = "";
  filterarray: any[] = [];

  constructor(private data: SendDataService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname.title)
    }
  }

    ngOnInit(): void{
    this.getData();
  }

}

<div>
    <div *ngIf="!value">
        <router-outlet></router-outlet>
    </div>
    <div *ngIf="value">
        <app-search-result></app-search-result>
    </div>
</div>

app.component.html:

export class SearchComponent implements OnInit {

  value: string;

  constructor(private data: SendDataService){}

  show: boolean = true;

  showEl(){
    this.show = true;
  }

  newValue() {
    this.data.changeValue(this.value)
    this.show = false;
  }

  ngOnInit(): void{
    this.data.currentValue.subscribe(value => this.value = value)
  }
}

<input type="text" [(ngModel)]="value" (click)="showEl()" (keyup.enter)="newValue()" (input)="showEl()">
<button (click)="newValue()">Search</button>

export class SearchResultComponent implements OnInit {

  _postsArray: = //JSON Object;
  value: string = "";
  filterarray: any[] = [];

  constructor(private data: SendDataService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname.title)
    }
  }

    ngOnInit(): void{
    this.getData();
  }

}

<div>
    <div *ngIf="!value">
        <router-outlet></router-outlet>
    </div>
    <div *ngIf="value">
        <app-search-result></app-search-result>
    </div>
</div>

---

当我将{{value}}放入app.component.html中时，它会在第一次单击搜索按钮时显示值。但

仅在第二次单击时显示。我如何解决这个问题？

您是否尝试使用ng change？单击和ng change之间有什么相似之处？