使用 tabview 替换组件

Question

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

我有 3 个组成部分。首先，一个组件将运行作为默认值。然后我想在点击tabview里面的面板时改变组件。

我正在尝试运行在 typescript 上使用 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？ a Tab-Panel 可以点击，写？所以使用(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 替换组件

component replacement using tabview

html

typescript

primeng

angular