부품 템플릿 이름 변경 각도 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

구성 요소 이름은 정적, 당신이 할 수있는 일은, 당신의 쇼 방법에 변수

public selected: number; 

를 선언, 구성 요소에서

같은과 그 구성 요소에 그 정보를 전달하는 설정입니다

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

로 선택한 다음에 템플릿이 선택 속성을 사용 귀하의 질문-전 구성 요소에서

<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 내에서 콘텐츠를 정의 할 수 있음을 의미합니다.하지만 이는 귀하에게 달려 있습니다.