更改组件模板名角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>

在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

您不应该更改模板选择器，因为它们是在页面上定义的，您应该构建一个更通用的模板，并使用@ the ()在页面上传递和内插内容，或者传递预定义的数字。

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

code-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中定义内容，将其从父组件中分离出来，但这取决于您。