更改组件模板名称角2

如何更改组件名称，取决于点击列表我需要将组件模板<FAQ-omni></FAQ-omni>更改为其他可能的模板？更改组件模板名称角2

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

来源

2017-01-23 sridharan

组件名称是静态的，你所能做的就是传递他的信息与类似

在你的组件，组件，声明一个变量

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>

来源

2017-01-23 10:49:31

你不应该更改模板选择，因为它们在页面上定义的，你应该建立一个更通用的模板，并使用@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中定义内容，将其与父项分开，但这取决于您。

来源

2017-01-23 10:53:34

更改组件模板名称角2

回答

相关问题