Angular 5 - 如何在组件初始化后重新加载组件

Question

我在应用程序中有一个搜索功能。当用户点击搜索按钮时，数据会被捕获到 [(ngModel)] 中并传递给一个服务。URL 会被重定向到 SearchComponent 的 HTML。

这个服务被注入到 SearchComponent 中，并且数据被显示出来。

当用户输入新的搜索词时，我希望刷新现有的 SearchComponent。正确的方法是什么？

search.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../service/data.service';

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

userInput : string; 
constructor(private data : DataService) { }

ngOnInit(){
    this.search();
}

search(){

    this.userInput = this.data.searchData;
    console.log('in search init  ' + this.userInput);
    this.data.searchData = "";
 }
}

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './service/data.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private data : DataService){};
   
  title = 'app';
  searchInput: string;
  
  searchButtonclick(){
    console.log('search button clicked   '  + (this.searchInput));
    this.data.searchData = this.searchInput
    this.searchInput = "";
  }

}

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <a routerLink="/search">
    <button (click)="searchButtonclick()">Search</button>
  </a>
</form>

- user2180794

Answer 1

我建议将 search.component.ts 作为子组件，并使用 @Input ：

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <app-search [userInput]="searchInput"></app-search>
</form>

search.component.ts

@Input() userInput: string;

ngOnChange(){
    // this will be called each time userInput changes
    this.search(); 
}

查看这篇文章，获取更多信息。

---

如果您想要在点击事件时获取值，您只需要添加一个额外的变量，例如searchvalue

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <button (click)="searchButtonclick()">Search</button>
  <app-search [userInput]="searchvalue"></app-search>
</form>

app.component.ts

searchvalue:string;
searchButtonclick(){
    this.searchvalue = this.searchInput;
}

search.component.ts

// as above

- Vivek Doshi

---

当用户点击搜索按钮后，我想清除输入字段。这会有任何影响吗？ - user2180794

是的，任何对“searchInput”的更改都会反映在“app-search”中。 - Vivek Doshi

每次值改变时，它都会调用后端。我如何限制它仅在搜索按钮点击时才进行调用？ - user2180794

@user2180794，我已经更新了用户点击的答案。 - Vivek Doshi

Answer 2

好的，诀窍在于如果模型被更新，组件无需重新加载。视图会自动更新。

因此，我编辑了我的 data.service，添加了一个 observable，并在搜索组件中订阅了这个 Observable。

data.service 用于共享数据

import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private localData = new BehaviorSubject<string>("");
  searchData = this.localData.asObservable(); 
  constructor() { }

  updateSearchInput(data : string ){
       this.localData.next(data);
  }
}

search.component

 import { Component, OnInit, Input } from '@angular/core';
 import { DataService } from '../service/data.service';

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

  userInput : string;
  constructor(private data : DataService) { }

  ngOnInit(){
    this.search();
  }

  search(){    
    this.data.searchData.subscribe((data) => this.userInput = data );  
  }
}

- user2180794