Question

我正在使用angular7。primeng tabview选项卡单击要更改的组件。但我做不到你能帮忙吗？

我有3个组成部分。首先，组件将默认运行。然后，当我单击tabview内的面板时，我想更改组件。

我正在尝试在打字稿上运行带有onchange的函数，但未调用函数。

还有其他方法可以运行功能吗？

谢谢。

.ts代码：

import { Component, OnInit} from '@angular/core';


@Component({
    selector: 'jhi-component-example',
    templateUrl: './component-example.component.html',
    styleUrls: ['./component-example.scss']
})
export class ComponentExample implements OnInit {
    id: number;
    constructor() { }

    ngOnInit() {
        this.id = 1;
    }
    func1() {
        this.id = 1;
    }
    func2() {
        this.id = 2;
    }
    func3() {
        this.id = 3;
    }

}

.html代码：


        <div class="global-div">
            <div class="div1-example">

                <p-tabView >
                    <p-tabPanel (onChange)="func1()" header="Component1" >

                    </p-tabPanel>

                    <p-tabPanel (onChange)="func2()" header="Component2">

                    </p-tabPanel>
                    <p-tabPanel (onChange)="func3()" header="Component3">

                    </p-tabPanel>

                </p-tabView>
            </div>

            <div class="div2-example">

                <p *ngIf="id==1">
                    <jhi-component1></jhi-component1>
                </p>
                <p *ngIf="id==2">
                    <jhi-component2></jhi-component2>
                </p>
                <p *ngIf="id==3">
                    <jhi-component3></jhi-component3>
                </p>
            </div>
        </div>

Answer 1

您为什么使用OnChange？可以单击Tab面板，写吗？因此，请使用(click)=funcX()。但这也可能会更好：

import { Component, OnInit} from '@angular/core';

@Component({
    selector: 'jhi-component-example',
    templateUrl: './component-example.component.html',
    styleUrls: ['./component-example.scss']
})
export class ComponentExample implements OnInit {
    id: number;
    constructor() { }

    ngOnInit() {
        this.id = 1;
    }
    changeID(id : number) {
        this.id = id;
    }
}

这也更好：

    <div class="global-div">
        <div class="div1-example">
            <p-tabView >
                <p-tabPanel (click)="changeID(1)" header="Component1" >
                </p-tabPanel>
                <p-tabPanel (click)="changeID(2)" header="Component2">
                </p-tabPanel>
                <p-tabPanel (click)="changeID(3)" header="Component3">
                </p-tabPanel>
            </p-tabView>
        </div>

        <div class="div2-example">
            <p *ngIf="id==1">
                <jhi-component1></jhi-component1>
            </p>
            <p *ngIf="id==2">
                <jhi-component2></jhi-component2>
            </p>
            <p *ngIf="id==3">
                <jhi-component3></jhi-component3>
            </p>
        </div>
    </div>

编辑：检查一下。从未与PrimeNG一起使用，但这应该是您想要的效果。我不知道p-TabPanels是如何工作的。 https://stackblitz.com/edit/angular-zhy5lu

使用tabview更换组件

1 个答案: