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

Posted 2023-02-22

【中文标题】Angular 5 - 如何在初始化后重新加载组件

【英文标题】：Angular 5 - How to reload a component after it is initialized

【发布时间】：2018-08-13 22:14:46

【问题描述】：

我在应用程序中有搜索功能。当用户单击搜索按钮时，数据将在[(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>

【参考方案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(); 

更多信息请见this article

---

如果你想在点击事件时这样做，你只需要一个额外的变量，比如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

【讨论】：

我想在用户单击搜索按钮后清除输入字段。会有影响吗？

是的，searchInput 上的任何更改都将反映到 app-search

所以每次更改值都会调用后端。如何将其限制为仅在单击搜索按钮时拨打电话？

@user2180794 ，我也更新了用户点击的答案

【参考方案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 );