カッター埋め込みタイプスクリプト

Question

私は別のクラス（DetailComponent）から派生したクラス（userComponent）を持っています。私が明示的に定義した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でボタンはあなたが相続を悪用している

Answer 1

をクリックしたとき、私は、detail.component.htmlのHTMLコンテンツを参照する必要があります。ユーザーコンポーネントが詳細を拡張する理由はありません。ユーザーは詳細ではありません。あなたが従う必要がある重要な手順は次のとおりです。

1. コンポーネントの名前を変更してください。あなたのユーザーコンポーネントは、実際にはArtistListComponentであるようです。詳細コンポーネントは、実際にはArtistDetailComponentであるようです。良い名前を使用すると、継承がどのように適用されないかがさらに分かります。アーティストリストはアーティストの詳細ではありません。

2. アーティストリストのコンポーネントコンポーネントに、detailedArtistという名前のフィールドを追加します。リスト内のアーティストの1人をクリックすると、クリックしたアーティストにdetailedArtistを設定します。アーティストリストコンポーネントのテンプレートで

3. 、detailedArtistが設定されている場合にのみ、詳細なアーティストを表示し、ArtistDetailComponentへの入力として、その詳細なアーティスト渡す：あなたのArtistDetailComponentで

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

4. は@Input()を追加しますデコレーションされたプロパティ。セッターを使用して、あなたはアーティストが入力変化として渡されたときに知ることができますので、あなたのバックエンドからそのアーティストの詳細を読み込むことができます：それはないとして

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