如何从 Angular 中的另一个组件获取 [(ngmodel)] 6

Question

我正在搜索带有管道的产品。在 product.component.html 中 [(ngModel)] 时管道正常工作，但在 app.component.html 中 [(ngModel)] 时管道不工作。

产品-find.pipe.ts:

import { Pipe, PipeTransform} from '@angular/core';
import { Product } from './product/product';

@Pipe({
  name: 'productFind'
})

export class ProductFindPipe implements PipeTransform {

  transform(value: Product[], filterText?: string): Product[] {
    filterText = filterText ? filterText.toLocaleLowerCase() : null;
    console.log(filterText);
    return filterText ? value.filter((x: Product) => x.productName.toLocaleLowerCase().indexOf(filterText) >= 0) : value;
  }

}

app.component.html:

...

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">

...

product.component.html:

<div>
  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
<div>
  <ul class="list-group">
    <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
      ...
    </li>
  </ul>
</div>

如何解决这个问题？

谢谢。

Answer 1

您需要在 product.component.ts 文件中声明 @Input 装饰器。

在product.component.ts中：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: 'your-template-url-here
})
export class ProductComponent {

    @Input() filterText: any; 

        //rest of your code here
}

在product.component.html

<div>
    <ul class="list-group">
       <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
                        ...
        </li>
    </ul>
</div>

现在你app.component.html喜欢：

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">
<app-product [filterText]="filterText"><app-product>

希望这对你有用!!!!

Answer 2

解决您的问题的两种可能方法：

在product.component.ts中定义filterText，在product.component.html中使用[(ngModel)]="filterText"。从 app.component.
使用@Input

app.component.html:

<app-product [filterText]="filterText"></app-product>

product.component.ts

@Input
filterText : string;

如何从 Angular 中的另一个组件获取 [(ngmodel)] 6

how to get [(ngmodel)] from another component in Angular 6

angular

angular6

angular-pipe