Question

我目前正在试图弄清楚为什么以一种似乎常见的方式来构造App的路由是有意义的。我的意思是这样的结构：

|_ app.component.ts
|_ app.component.html
|_ app.module.ts
|_ app-routing.module.ts
 |_ league.component.ts  
 |_ league.component.html  
 |_ league.module.ts
   |_ teams.component.ts  
   |_ teams.component.html  
   |_ teams.module.ts
   |_ player.component.ts  
   |_ player.component.html  
   |_ player.module.ts

在模块中分别为每个零件进行布线。为什么这么有意义？只是为了获得清晰的视图，在哪里发生了什么？

下一个问题：
我必须在哪里放置page-router-outlet / router-outlet？它们之间的最大区别是什么？在上面的示例中，我努力显示“团队/球员”页面。我可以导航到页面，但不显示它们。（我可以登录当前的网址，并且这些网址适合我所指定的导航）

league.module.ts：

@NgModule({
    imports: [
        SharedModule,
        NativeScriptCommonModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forChild([
            {
                path: "default",
                component: LeagueComponent,
                children: [
                    {
                        path: "teams/:id",
                        outlet: "LeagueOutlet",
                        component: NSEmptyOutletComponent,
                        loadChildren: () => import("~/app/League/league.module").then(m=> m.LeagueModule),
                    },
                ],
            },
        ]),
    ],
    declarations: [LeagueComponent],
    providers: [],
    schemas: [NO_ERRORS_SCHEMA],
})
export class LeagueModule {}

league.component.html：

<ns-action-bar title="League" [hasMenu]="true" [showBackButton]="false" [showImage]="false" [showLogOutButton]="false" ></ns-action-bar>
<GridLayout *ngIf="!isLoading && result">
    <ListView iosEstimatedRowHeight="20" [items]="monitorListe" >
        <ng-template let-monitorListeElem="item" let-i="index">
            <GridLayout rows="{{rowHeight/2}}, {{rowHeight/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>
<FlexboxLayout justifyContent="center" alignItems="center" *ngIf="isLoading  && !result">
    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</FlexboxLayout>

我必须在HTML中将以下内容放置在哪里？

<page-router-outlet name="leagueOutlet"></page-router-outlet>`

Cheers!

角型页面路由器插座

0 个答案: