Question

我希望能够在根组件（AppComponent）中访问SearchResults组件（单击时），因为我希望在{{1}上设置不同的属性}组件；

我想在SearchResults组件上设置一个属性，以使其显示“关闭”文本
此外，我将在SearchResults上设置click事件，以将其重定向到其他位置或实际上将其启用为多选功能，以便在用户进入下一步之前一直保持选中状态。

我正在尝试使SearchResults和SearchResults组件尽可能地可重用，因此我们能够在父组件中声明其中将包含SearchResult选择器，我们希望我们的<app-searchresults>组件在被点击时能够真正实现。

我真正看到的唯一方法是使用SearchResults将事件通过EventEmitter组件传递一次，然后传递到父组件，然后传递一个服务来保存选定的值，但是仍然坚持启用SearchResult组件作为单击或重新选择时会重定向的组件？确实可行吗？还是我需要为每个想要的状态创建一个不同的SearchResults组件？！

SearchResults

SearchResults.ts

export class AppComponent  {

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

  name = 'Angular';

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

SearchResults.html

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

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

  constructor() { }

  ngOnInit() {
  }
}

SearchResult.ts

<h1>Search Results<h1>

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

SearchResult.html

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

我已包含一个引用上述内容的应用程序结构的链接； https://stackblitz.com/edit/angular-cjhovx

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

0 个答案: