Javascript 访问子组件'；嵌套在另一个组件中时的方法

我希望能够访问根组件（AppComponent）中的

SearchResults

组件（单击后），因为我希望在

SearchResults

组件上设置不同的属性，例如

• 我想在

  SearchResults

  组件上设置一个属性，以便它显示“关闭”文本
• 此外，我还想将

  搜索结果

  上的点击事件设置为重定向到其他位置，或者实际将其启用为多选，以便它保持选中状态，直到用户进入下一步

---

我试图使

搜索结果

和

搜索结果

组件尽可能可重用，以便我们能够在父组件中声明，其中将包括

如果您愿意，请在问题本身中发布与问题相关的所有代码-不要将其隐藏在链接后面。你不应该告诉那些想帮忙的潜在帮手，他们必须在异地工作，只是为了了解你在做什么。如果链接中断，这个问题可能对未来的读者毫无用处。请将您的代码编辑到a中的问题中，否则问题可能会关闭，谢谢。如果您愿意，请在问题本身中发布与问题相关的所有代码-不要将其隐藏在链接后面。你不应该告诉那些想帮忙的潜在帮手，他们必须在异地工作，只是为了了解你在做什么。如果链接中断，这个问题可能对未来的读者毫无用处。请将您的代码编辑到a中的问题中，否则问题可能会被关闭，谢谢。
export class AppComponent  {

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

  name = 'Angular';

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

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

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

  constructor() { }

  ngOnInit() {
  }
}

<h1>Search Results<h1>

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

@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;
    }
  }
}

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