Angular 无法在typescript中嵌入父模板

我有一个类（userComponent），它是从另一个类（DetailComponent）派生出来的，我调试它，看到除此之外的一切都如我所期望的那样工作（没有例外）；细节组件的模板未在我明确定义的UserComponent中呈现。下面的类和模板

艺术成分

import { Component} from '@angular/core';
import { Auth } from '../services/auth.service'
import { SpotfyService } from '../services/spotify.service'
import { Observable } from 'rxjs/Rx';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'app-users',
    templateUrl: '../templates/user.component.html'
})
export class ArtistComponent {
    detailedArtist:any;
    artists: any;
    spotfyService: SpotfyService;
    showArtistDetails=false;
    constructor(private auth: Auth, spotfyService: SpotfyService) {
        this.spotfyService = spotfyService;
    }
    selectArtist(artistlink){
        debugger
        this.detailedArtist=artistlink;
    }
}

artistlist.component.html：

    <div class="row">
        <form class="form-horizontal" >
            <input id="searchby" class="from-control" >
        </form>
    </div>
<a (click)="selectArtist(artist.Id)">{{artist.name}}</a>
<artist-detail *ngIf="detailedArtist" artist="detailedArtist"></artist-detail>

detail.component.html

<div class="row" *ngIf="isLoading">
    Retrieveing artist info....
</div>
<div class="row" *ngIf="showArtistDetails">
    <div class="col-md-12">
        <img class="img-circle" style="width:100%" src="{{artistDetails.images[0]?.url}}">
    </div>
</div>

正在检索艺术家信息。。。。

---

我需要查看detail.component.html的html内容，当user.component.html中的按钮单击时，您误用了继承。用户组件没有理由扩展详细信息。用户不是一个细节。以下是您需要遵循的重要步骤：

重命名组件。您的用户组件实际上似乎是ArtistListComponent。您的细节组件实际上似乎是ArtistDetailComponent。使用好名字更能说明继承是如何不适用的：艺术家列表不是艺术家细节

在艺术家列表组件中，添加名为

detailedArtist

的字段。单击列表中的艺术家之一时，将

detailedArtist

设置为单击的艺术家

在艺术家列表组件的模板中，仅当设置了

detailedArtist

时才显示详细艺术家，并将该详细艺术家作为输入传递给ArtistDetailComponent：

<artist-detail *ngIf="detailedArtist" [artist]="detailedArtist"></artist-detail>

---

我建议将其标记为angular 2，因为这不是一个打字问题。@alekkowalczyk done.。我不明白。showDetails（）的作用是什么？为什么希望模板detail.component.html显示在用户组件的模板中？为什么用户从细节继承？@JBNizet我想在用户单击时调用细节。因此，用户和细节，所以由于调用细节组件的showDetails功能，我从它派生的用户该继承将不起作用，您应该创建UserComponent作为一个具有子DetailComponent的组合。您好，感谢详细的回答我做了您所说的一切，并根据您的回答编辑了文章，我认为最后一步有问题。你能检查我的编辑吗，再次谢谢你，

@Input（）

必须在setter上。正如我现在在回答中所做的那样。不是设置函数，而是设置artist.id的值，设置artist的参数值（a:any）“a='detailedArtist'”获取属性的变量名？为什么会发生这种情况？使用绑定语法，将艺术家包围在括号中

[artist]=“detailedarist”

我犯了一个错误。它是

[artist]=“detailedarist”

。

<artist-detail *ngIf="detailedArtist" [artist]="detailedArtist"></artist-detail>

@Input()
set artist(a: Artist) {
     // load the details of the given artist
}