Доступ к методу дочернего компонента при вложении в другой компонент

Question

Я бы хотел иметь возможность доступа к компоненту SearchResults (при его щелчке) в корневом компоненте (AppComponent), так как я хочу установить различные свойства для компонента SearchResults, такие как;

• Я бы хотел установить атрибут для компонента SearchResults, чтобы он отображал текст «close»
• Кроме того, я бы установил событие нажатия наSearchResults для перенаправления в другое место или фактического включения его как множественного выбора, чтобы он оставался выбранным, например, пока пользователь не перейдет к следующему шагу, например.

Я пытаюсь сделать SearchResults и SearchResult компоненты максимально пригодны для повторного использования, поэтому мы можем указать в родительском компоненте, который будет включать селектор <app-searchresults>, какое действие мы бы хотели, чтобы наши компоненты SearchResults действительно выполняли при нажатии.

Единственный способ убедиться в этом - использовать EventEmitter для однократной передачи события через компонент SearchResult, затем на родительский компонент и затем в службу для хранения выбранных значений, но я по-прежнемузастряли вокруг enabliКомпонент SearchResults как компонент, который перенаправляет при нажатии или остается выбранным?Это на самом деле возможно, или мне нужно создавать разные SearchResults компоненты для каждого отдельного состояния, которое я хочу?!

export class AppComponent  {

  @ViewChildren(SearchresultComponent) components: QueryList<SearchresultComponent>;

  name = 'Angular';

  ngAfterViewInit() {
    this.components.changes.subscribe((r) => { console.log(r) });
  }
}

SearchResults.ts

@Component({
  selector: 'app-searchresults',
  templateUrl: './searchresults.component.html',
  styleUrls: ['./searchresults.component.css']
})
export class SearchresultsComponent implements OnInit {

  @ViewChildren(SearchresultComponent) components: QueryList<SearchresultComponent>;

  constructor() { }

  ngOnInit() {
  }
}

SearchResults.html

<h1>Search Results<h1>

<app-searchresult result ="first"></app-searchresult>
<app-searchresult result ="second"></app-searchresult>
<app-searchresult result ="third"></app-searchresult>

SearchResult.ts

@Component({
  selector: 'app-searchresult',
  templateUrl: './searchresult.component.html',
  styleUrls: ['./searchresult.component.css']
})
export class SearchresultComponent implements OnInit {

  @Input()
  result: string;

  isSelected: boolean;

  constructor() { }

  ngOnInit() {
  }

  toggleClickedState(){
    if(!this.isSelected){
      this.isSelected = !this.isSelected;
    }
  }
}

SearchResult.html

<div>
  <p (click)=toggleClickedState() [ngClass]="isSelected? 'selected' : '' "> Search Result : {{result}}</p>
  <p *ngIf="isSelected" class="cross" (click)="isSelected = false;">close</p>
<div>

Я включил ссылку на структуру приложения, которая ссылается на выше;https://stackblitz.com/edit/angular-cjhovx