Question

在我的应用中，根据我访问组件的方式，网格布局的显示方式有所不同。

我有两种获取组件的方法，第一种是通过android硬件按钮进行标准的向后导航，第二种是到组件的导航。

监视列表（父组件）如下所示： expected monitor-list

使用硬件按钮或触发routerExt.backToPreviousPage()的按钮时该列表将按预期显示，但是如果我使用相同或另一个按钮并通过routerExt.navigate()执行此操作，则该列表将不再按预期显示，如下所示： bugged monitor-list

这种行为的原因可能是什么？

列表的代码是这样的：

<ns-action-bar title="Liste der Monitore" [hasMenu]="true" ></ns-action-bar>
<GridLayout *ngIf="!isLoading && result">
    <ListView iosEstimatedRowHeight="20" [items]="monitorListe" >
        <ng-template let-monitorListeElem="item" let-i="index">
            <GridLayout rows="{{rowHeight/4}}, {{rowHeight/(3/2)}},auto" columns="6*,*">
                <Label row="0" col="0" class="ListViewElement" [text]="monitorListeElem.name" textWrap="true"  (tap)="onItemTap(monitorListeElem)"></Label>

                <Label row="0" col="1" class="fa fa-rot" text="&#xf111;" *ngIf="monitorListeElem.prioritaet==1"></Label>
                <Label row="0" col="1" class="fa fa-orange" text="&#xf111;" *ngIf="monitorListeElem.prioritaet==2"></Label>
                <Label row="0" col="1" class="fa fa-gelb" text="&#xf111;" *ngIf="monitorListeElem.prioritaet==3"></Label>
                <Label row="0" col="1" class="fa fa-gruen" text="&#xf111;" *ngIf="monitorListeElem.prioritaet==4"></Label>
                <Label row="0" col="1" class="fa fa-grau" text="&#xf111;" *ngIf="monitorListeElem.prioritaet==0"></Label>
                <GridLayout row="1" col="0" rows="*,*" columns="*,*,*" (tap)="onItemTap(monitorListeElem)">
                    <Label row="0" col="0" class="ListViewElementSmall ListViewElementGrey" text="Last Update"></Label>
                    <Label row="0" col="1" class="ListViewElementSmall ListViewElementGrey" text="Last Value"></Label>
                    <Label row="0" col="2" class="ListViewElementSmall ListViewElementGrey" text="Tendenz"></Label>
                    <Label row="1" col="0" class="ListViewElementSmall" [text]="monitorListeElem.time"></Label>
                    <Label row="1" col="1" class="ListViewElementSmall" [text]="monitorListeElem.aktueller_wert"></Label>
                    <Label row="1" col="2" class="ListViewElementSmall" text="N"></Label>
                </GridLayout>
                <Label row="1" col="1" class="fa ListViewElement" text="&#xf107;" *ngIf="!showGrafik" (tap)="onArrowTap(monitorListeElem)"></Label>
                <Label row="1" col="1" class="fa ListViewElement" text="&#xf106;" *ngIf="showGrafik" (tap)="onArrowTap(monitorListeElem)"></Label>
                <Label row="2" *ngIf="noChartValues && (monitorListeElem.id == curMonitor.id)" col="0" colSpan = "2" text="No Values"></Label>
                <StackLayout row="2" col="0" colSpan="2" *ngIf="showGrafik && (monitorListeElem.id == curMonitor.id)" >
                    <RadCartesianChart   tkExampleTitle tkToggleNavButton height=200>
                        <CategoricalAxis *ngIf="!vleset" tkCartesianHorizontalAxis lineColor="#00134d" labelFormat="time"
                            ticksOffset="0" majorTickInterval="3" labelTextColor="#00134d" labelFitMode="Rotate" labelRotationAngle="30"
                            labelSize="10">
                        </CategoricalAxis>
                        <CategoricalAxis *ngIf="vleset" tkCartesianHorizontalAxis lineColor="#00134d" labelFormat="time" ticksOffset="0"
                            labelTextColor="#00134d" labelFitMode="Rotate" labelRotationAngle="30" labelSize="10">
                        </CategoricalAxis>
                        <LinearAxis id="verBarAxis" tkCartesianVerticalAxis lineColor="#00134d" labelTextColor="#00134d"></LinearAxis>
                        <LineSeries tkCartesianSeries [items]="categoricalSource" lineColor="#00134d" strokeColor="#00134d"
                            categoryProperty='time' valueProperty="wert">
                        </LineSeries>
                        <StackLayout *ngIf="showGrafik && (monitorListeElem.id == curMonitor.id)">
                            <ChartPlotBandAnnotation tkCartesianAnnotations axisId="verBarAxis" minValue="-0.0001"
                                maxValue="50" zPosition="BelowSeries" strokeWidth="0" fillColor="rgba(63,171,0,0.03)"
                                strokeColor="rgba(63,171,0,0.03)">
                            </ChartPlotBandAnnotation>
                        </StackLayout>
                        <Palette tkCartesianPalette>
                            <PaletteEntry tkCartesianPaletteEntry strokeColor="#00134d" strokeWidth="7"></PaletteEntry>
                        </Palette>
                    </RadCartesianChart>
                </StackLayout>
            </GridLayout>
        </ng-template>
    </ListView>
</GridLayout>


<StackLayout *ngIf="!isLoading && !result">
        <Label class ="h2" text="No Monitore!"></Label>
</StackLayout>
<FlexboxLayout justifyContent="center" alignItems="center" *ngIf="isLoading  && !result">
    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</FlexboxLayout>

tldr： routerExt.navigate()和routerExt.backToPreviousPage()以不同的方式显示相同的组件。

Angular NativeScript向后路由与导航

0 个答案: