замена компонентов с использованием tabview - PullRequest
Новая
       3

замена компонентов с использованием tabview

0 голосов
/ 23 мая 2019

Я использую угловые 7. вкладки primeng tab Нажмите на компонент, который я хочу изменить.но я не мог.Не могли бы вы помочь?

У меня есть 3 компонента.Во-первых, компонент будет работать по умолчанию.Затем я хочу изменить компоненты, когда нажимаю на панель внутри вкладки.

Я пытаюсь запустить функции с 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>

1 Ответ

0 голосов
/ 23 мая 2019

почему вы используете OnChange? 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

...