Question

我有一个类（userComponent）派生自另一个类（DetailComponent）我调试并看到一切都按预期工作（没有异常），除了东西;我明确定义的UserComponent中未呈现的Detail组件的模板。下面的课程和模板;

ArtistlistComponent;

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.ts

    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: 'artist-details',
        templateUrl: '../templates/detail.component.html'
    })
    export class DetailComponent {
        selectedartist: any;
        spotfyService: SpotfyService;
        artistDetails;
        constructor(spotfyService: SpotfyService) {
            this.spotfyService = spotfyService;
        }
        @Input()
        set artist(a:any) {
        // load the details of the given artist
        // a='detailedArtist' getting name of property not value ?
        this.selectedartist = a;

         this.isLoading=true;
        this.showArtistDetails=false;  
        var info = this.spotfyService.getDetails(a);
        info.subscribe(data=>{ 
            this.artistDetails = data;
            this.showArtistDetails=true;  
            this.isLoading=false;  
        });

}
    }

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>

当user.component.html中的按钮点击时，我需要查看detail.component.html的html内容

Answer 1

你滥用继承权。用户组件没有理由扩展细节。用户不是细节。以下是您需要遵循的重要步骤：

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

不能在打字稿中嵌入父母模板

1 个答案: