更改组件模板名称角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>
答
组件名称是静态的,你所能做的就是传递他的信息与类似
在你的组件,组件,声明一个变量
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>
答
你不应该更改模板选择,因为它们在页面上定义的,你应该建立一个更通用的模板,并使用@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中定义内容,将其与父项分开,但这取决于您。