从列表末尾过滤元素(Filter elements from the end of a list)

 你滥用继承权。 用户组件没有理由扩展细节。 用户不是细节。 以下是您需要遵循的重要步骤： 
 
 
 
 重命名组件。 您的用户组件似乎实际上是ArtistListComponent。 您的详细信息组件实际上似乎是ArtistDetailComponent。 使用好名称更多地显示了继承不适用的方式：艺术家列表不是艺术家详细信息。 
 
 
 在您的艺术家列表组件组件中，添加名为detailedArtist的字段。 单击列表中的某个艺术家时，将detailedArtist设置为单击的艺术家。 
 
 
 在艺术家列表组件的模板中，仅在设置了详细艺术家时显示详细艺术家，并将该详细艺术家作为输入传递给ArtistDetailComponent： 
<artist-detail *ngIf="detailedArtist" [artist]="detailedArtist"></artist-detail>
 
 
 在ArtistDetailComponent中添加@Input() decorated属性。 使用setter，您可以知道艺术家何时作为输入更改，并因此可以从后端加载该艺术家的详细信息： 
@Input()
set artist(a: Artist) {
     // load the details of the given artist
}
 

You're misusing inheritance. There is no reason for the user component to extend detail. A user is not a detail. Here's the important steps you need to follow:
 
 
 
Rename your components. Your user component seems to actually be an ArtistListComponent. Your detail component seems to actually be an ArtistDetailComponent. Using good names shows even more how inheritance is not applicable: an artist list is not an artist detail.
 
 
In your artist list component component, add a field named detailedArtist. When clicking one of the artists in the list, set the detailedArtist to the clicked artist.
 
 
In the template of the artist list component, display the detailed artist only if the detailedArtist is set, and pass that detailed artist as input to the ArtistDetailComponent:
 
<artist-detail *ngIf="detailedArtist" [artist]="detailedArtist"></artist-detail>
 
 
In your ArtistDetailComponent add an @Input()-decorated property. Using a setter, you can know when the artist passed as input changes, and can thus load the detail of that artist from your backend:
 
@Input()
set artist(a: Artist) {
     // load the details of the given artist
}