コンポーネントテンプレート名の角を変更する2

Question

コンポーネント名を変更する方法、クリックリストに依存するコンポーネントテンプレート<FAQ-omni></FAQ-omni>を別のテンプレートに変更する必要がありますか？

<div class="row"> 
     <div class="col-xlg-4 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12" title="FAQ" baCardClass="medium-card with-scroll"> 
     <FAQ-omni></FAQ-omni> 
     <ul class="alShare"> 
     <li (click)="Show(1)">Locator</li> 
     <li (click)="Show(2)">Offer</li> 
     <li (click)="Show(3)">Contact</li> 
     <li (click)="Show(4)">Holiday</li> 
     <li (click)="Show(5)">FAQ</li> 
     </ul> 
     </div> 
</div> 

Answer 1

コンポーネント名は静的であり、何を行うことができますことは、あなたのshowメソッドで変数

public selected: number; 

を宣言し、あなたのコンポーネントで

のようなもので、そのコンポーネントに彼の情報を渡す設定です選択されているのは

public show(num: number) 
{ 
    this.selected = num; 
} 

ですあなたのFAQ-オムニコンポーネントで

<FAQ-omni selected="selected"></FAQ-omni> 

のように情報を渡し、あなたは

@Component({ 
    selector: 'FAQ-omni', 
    templateUrl: '/template/path.html', 
    inputs: ['selected'] 
}) 
export class LoginComponent 
{ 
    public selected: number; 
} 

のように入力として、この変数を受け取り、これはあなたが望む任意の情報を非表示/レンダリングするテンプレートで選択し使用することができます。

* ngIfディレクティブを使用して、この変数を使用して、条件に基づいて他のコンポーネントを表示することもできます。

<FAQ-omni *ngIf="selected == 1"></FAQ-omni> 
<SomeOther-Component *ngIf="selected == 2"></SomeOther-Component> 

Answer 2

あなたは彼らがページ上に定義されているとして、あなたは、より汎用的なテンプレートを構築し、コンテンツを渡し、ページ上で補間するかで渡す@Input（）を使用する必要がありますテンプレートセレクタを変更しないでくださいあなたの定義済みの番号。

<div class="row"> 
    <div class="col-xlg-4 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12" title="FAQ" baCardClass="medium-card with-scroll"> 
     <FAQ [faqData]="faqData"></FAQ> 
     <ul class="alShare"> 
     <li (click)="Show(1)">Locator</li> 
     <li (click)="Show(2)">Offer</li> 
     <li (click)="Show(3)">Contact</li> 
     <li (click)="Show(4)">Holiday</li> 
     <li (click)="Show(5)">FAQ</li> 
     </ul> 
    </div> 
</div> 

コード-behind.ts

export class CodeBehind { 

    public faqData: SomeObject = {//define default}; 

    public Show(faqToShow: number) { 

     switch(faqToShow) { 

     case 1: 
      this.faqData = Locator 
     case 2: 
     //and so on... 

     } 
    } 
} 

faq.component.ts

export class FAQ { 

    @Input() public faqData: SomeObject; 
} 

あなたがそれを行う場合、上記の方法は、親でオブジェクトを定義しますしかし、数値を渡すと、FAQ内でコンテンツを定義して親から分離することができますが、それはあなた次第です。