Question

我是棱角分明的新人。我正在创建一个搜索引擎项目，该项目在输入框中输入组件并将输入传输到正在更改为的组件中的输入框。我该怎么做呢？我想要在应用程序组件之间切换的组件如下：

<app-search-page></app-search-page>
<app-search-results-page></app-search-results-page>

在应用搜索页面中是初始输入框：

<input class = "search" (input)="changeComponent($event)">

（“changeComponent（$ event）”无效）

在应用搜索结果页面中是第二个输入框，即接收初始内容的输入框：

<input class = "input">

Answer 1

您必须使用服务让他们两人交换信息。这是一个例子：

这是你的服务。它存储并提供名为searchItem的字符串值。注意！您必须在app.module.ts中导入并提供此服务！

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


@Injectable()
export class StorageService {

    private searchItem: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }

    getSearchItem(): Observable<string> {
        return this.searchItem.asObservable();
    }

    getSearchItemValue(): string {
        return this.searchItem.getValue();
    }

    setSearchItem(val: string) {
        this.searchItem.next(val);
    }
}

您的AppSearchResultPageComponent订阅此服务，并在服务内的值发生更改时进行更新。

import {StorageService} from 'storage.service.ts';

private searchItem: string = '';

constructor(
   private storageService: StorageService
){}

ngOnInit(): void {
    // Update with every change
    this.storageService.getSearchTerm().subscribe(term => {
        this. searchItem = term; 
    });
}

您的AppSearchPageComponent必须在每次按键后将值设置为StorageSevice：

import {StorageService} from 'storage.service.ts';

private searchItem: string = '';

constructor(
 private storageService: StorageService
){}

// store the current value of searchItem to the service
private changeComponent(event): void {
    this.storageService.setSearchItem(searchItem);
}

AppSearchPageComponent中的输入字段需要ngModel-directive才能直接与变量searchItem交互

<input class = "search" type="text" [(ngModel)]="searchItem" (input)="changeComponent($event)">

并且您的AppSearchResultPageComponent也需要它，以便在searchItem更改时获得更新。

<input class="input" type="text" [(ngModel)]="searchItem">

如果您现在在AppSearchPageComponent的输入字段中输入一个值，它将直接出现在AppSearchResultPageComponent的输入字段中。

角;更改表单输入中的组件

1 个答案: