Question

我在标题组件中有一个搜索栏，它应该在另一个组件的列表中搜索。如何让headerComponent调用BooksComponent中的函数？

export class HeaderComponent {
    search(){
        searchBooks($(".header-search-input").val());
    }
}


export class BooksComponent {

  searchBooks(searchWord){
    ...
}

Answer 1

您可以将search()函数移动到服务并将其注入需要此函数的组件中。

<强> search.service.ts

@Injectable
export class SearchService {
  search() {
    ...
  }
}

<强>注塑

import { SearchService } from './search.service.ts';

export class HeaderComponent {
  constructor(public searchService SearchService) {}

  search() {
    this.searchService.search();
  }
}

Answer 2

创建属性类型为Subject的服务。然后将其注入两个组件中。在HeaderComponent中，当输入中的值发生更改时，调用Subject.next（val），在BooksComponent中订阅此主题并调用rest api。应在声明两个组件的模块上提供主题服务。

Answer 3

首先，您应该了解无法从当前component调用或访问其他component的数据。
通过使用Input，Output属性，只有组件可以互相交互。
通过使用输入属性将输入参数作为子组件传递，您可以对child component执行某些操作。
如果你想在parent component上执行操作，你应该这样做将Output与event emitter一起使用。

我希望这会对你有所帮助。

Answer 4

解决方案是创建服务并使用事件发射器。

<强> Book.service.ts

export class BookService {
    search = new EventEmitter<string>();
}

标题组件

export class headerComponent() {
   constructor(private bookService:BookService) {}

   search() {
       this.bookService.search.emit($(".header-search-input").val());
   }
}

书籍组件

export class BookComponent {
    constructor(private bookService:BookService) {
        //Catch the event to make the search
        this.bookService.search.subscribe(value => {
             this.searchBooks(searchWord);
        });
    }
}

另一个组件中的Angular 4调用函数

4 个答案: