Question

我有一个BottomNavigation组件，需要显示在其他3个组件中：OrderComponent，UserAreaComponent和Locations Component。

我实现了这样的组件：

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="My Yooji's"></Label>
</ActionBar>
<GridLayout class="page p-t-15" rows="*,60">
    <ScrollView row="0">
        <Label text="MyYooji's Area"></Label>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <bottom-navigation></bottom-navigation>            <---- HERE
    </StackLayout>
</GridLayout>

BottomNavigation组件在app.module.ts @NgModule声明下导入：

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule
    ],
    providers: [
        ApiService,
        UserService,
        AuthGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        }
    ],
    declarations: [
        AppComponent,
        BottomNavigationComponent       <---- DECLARED
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

像这样，不会渲染。

在其他组件中全局使用BottomNavigation组件的正确方法是什么？

增加：如果我在例如Order Component的order.module.ts的声明数组中导入BottomNavigationComponent，则底部导航将显示在Order Component中。但是像这样，底部导航在除订单组件之外的其他组件中不可用......

底navigation.component.ts：

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  moduleId: module.id,
  selector: "bottom-navigation",
  templateUrl: "./bottom-navigation.component.html",
  styleUrls: ["./bottom-navigation.component.scss"]
})
export class BottomNavigationComponent implements OnInit {

  navItems = [
    {id: 1, name: "My Yooji's", targetUrl: "myyoojis", img: "myyoojis24.png"},
    {id: 2, name: "Order", targetUrl: "order", img: "order24.png"},
    {id: 3, name: "Locations", targetUrl: "locations", img: "locations24.png"}
  ];
  activeNavItemId: any;

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    // console.log(this.activeNavItem);
   }

  onNavItemTap(navItem) {
    this.router.navigateByUrl(navItem.targetUrl);
  }

}

Answer 1

如果您使用的是延迟加载模块，则必须在要使用它的每个模块中导入“BottomNavigation”。

Answer 2

只需将BottomNavigationModule放入@NgModules导入中，而不使用声明即可。

imports: [
    // other imports removed
    BottomNavigationModule
]

nativescript app中的共享Angular组件，未显示

2 个答案: