다른 구성 요소의 각도 4 호출 기능

Question

헤더 구성 요소에 다른 구성 요소의 목록을 검색하는 검색 표시 줄이 있습니다. BooksComponent에서 함수를 호출하기 위해 headerComponent를 얻으려면 어떻게해야합니까?

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


export class BooksComponent { 

    searchBooks(searchWord){ 
    ... 
} 

Answer 1

제목이 속성 유형 인 서비스를 만듭니다. 그런 다음 두 구성 요소에 주입하십시오. HeaderComponent에서 입력 값이 변경되면 Subject.next (val)를 호출하고 BooksComponent에서이 제목을 등록하고 rest API를 호출합니다. 두 구성 요소를 모두 선언하는 모듈에 주체와 서비스를 제공해야합니다.

Answer 2

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 3

1. 먼저 당신은 전화 또는 현재에서 다른 component 데이터에 액세스 할 수있는 방법이 없습니다 이해해야합니다 component.

2. Input, Output 속성을 사용하면 구성 요소 만 상호 작용합니다.

3. 입력 특성을 사용하여 입력 매개 변수를 자식 구성 요소로 전달하면 child component에서 일부 작업을 수행 할 수 있습니다.
4. 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); 
     }); 
    } 
}