Question

如何更改组件名称，取决于我需要将组件模板sort -n numbers.txt更改为其他模板的点击列表？

<FAQ-omni></FAQ-omni>

Answer 1

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

Answer 2

组件名称是静态的，您可以做的是将信息传递给该组件，如

在您的组件中，声明一个变量

public selected: number;

在show方法中，将所选内容设置为

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>

更改组件模板名称angular 2

2 个答案: