Question

我在多个组件中拆分了Tabset（ngb-tabset）。在每个标签内容中，我通过简单的app-selector创建组件。当我导航到上一个选项卡时，组件将被创建为新的。我不希望这种行为，因为之前的选择，......应该是持久的。从服务器加载数据时组件非常复杂......所以我认为在服务中存储数据的解决方案并不正确。有人有想法吗？组件单例是否有解决方案？

<ngb-tabset #tabset [justify]="currentJustify">     
    <ngb-tab id="calculator_tab_1" title="">
    <ng-template ngbTabTitle><b>1.</b>Upload</ng-template>
    <ng-template ngbTabContent><app-upload [calculatorComp]="this"></app-upload></ng-template> 
    </ngb-tab>

    <ngb-tab id="calculator_tab_2" title=""> 
    <ng-template ngbTabTitle><b>2.</b>Production</ng-template>
    <ng-template ngbTabContent><app-buttonbar #buttonbar></app-buttonbar><app-productionprocess [calculatorComp]="this" [buttonbar]="buttonbar"></app-productionprocess></ng-template> 
    </ngb-tab> 

    <ngb-tab id="calculator_tab_3" title=""> 
    <ng-template ngbTabTitle><b>3.</b>Material</ng-template> 
    <ng-template ngbTabContent><app-buttonbar #buttonbar></app-buttonbar><app-material [calculatorComp]="this" [buttonbar]="buttonbar"></app-material></ng-template> 
    </ngb-tab> 

    <ngb-tab id="calculator_tab_4" title=""> 
    <ng-template ngbTabTitle><b>4.</b>Count</ng-template>
    <ng-template ngbTabContent><app-buttonbar #buttonbar></app-buttonbar><app-count [calculatorComp]="this" [buttonbar]="buttonbar"></app-count></ng-template> 
    </ngb-tab> 

    <ngb-tab id="calculator_tab_5" title="">
    <ng-template ngbTabTitle><b>5.</b>Machining</ng-template> 
    <ng-template ngbTabContent><app-buttonbar #buttonbar></app-buttonbar><app-machiningprocess [calculatorComp]="this" [buttonbar]="buttonbar"></app-machiningprocess></ng-template> 
    </ngb-tab> 

    <ngb-tab id="calculator_tab_6" title=""> 
    <ng-template ngbTabTitle><b>6.</b>Price</ng-template> 
    <ng-template ngbTabContent><app-buttonbar #buttonbar></app-buttonbar><app-price [calculatorComp]="this" [buttonbar]="buttonbar"></app-price></ng-template>
     </ngb-tab> 
 </ngb-tabset>

Angular 5 Tabset始终创建新的组件

0 个答案: