Question

我目前正在使用Ionic 4开发一个移动应用程序。我使用Ionic CLI进行了构建，但我做了一个空白项目。我创建了一些组件（例如登录，注册...），然后，从Ionic添加了Tabs。

我的问题是，离子选项卡仅出现在tabs.router.module.ts中的页面上。如何在所有页面上显示标签？

除了它们，每个组件都在app-routing.module.ts中，我试图将它们剪切并粘贴到tabs.router.module.ts中，但我不确定这是一件好事。

tabs.routes.module.ts

def set_backlight(r, g, b):
    backlight.set_all(r, g, b)
    backlight.show()

menu_options = [
            MenuOption('Set BL Red', set_backlight, (255, 0, 0)),
            MenuOption('Set BL Green', set_backlight, (0, 255, 0)),
            MenuOption('Set BL Blue', set_backlight, (0, 0, 255)),
            MenuOption('Set BL Purple', set_backlight, (255, 0, 255)),
            MenuOption('Set BL White', set_backlight, (255, 255, 255)),
            MenuOption('Exit', sys.exit, (0,))
        ]

current_menu_option = 1

trigger_action = False

def handler(ch, event):
    global current_menu_option, trigger_action
    if event != 'press':
        return
    if ch == 1:
        current_menu_option += 1
    if ch == 0:
        current_menu_option -= 1
    if ch == 4:
        trigger_action = True
    current_menu_option %= len(menu_options)

for x in range(6):
    touch.set_led(x, 0)
    backlight.set_pixel(x, 255, 255, 255)
    touch.on(x, handler)

backlight.show()

def cleanup():
    backlight.set_all(0, 0, 0)
    backlight.show()
    lcd.clear()
    lcd.show()

atexit.register(cleanup)

try:
    while True:
        image.paste(0, (0, 0, width, height))
        offset_top = 0

        if trigger_action:
            menu_options[current_menu_option].trigger()
            trigger_action = False

        for index in range(len(menu_options)):
            if index == current_menu_option:
                break
            offset_top += 12

        for index in range(len(menu_options)):
            x = 10
            y = (index * 12) + (height / 2) - 4 - offset_top
            option = menu_options[index]
            if index == current_menu_option:
                draw.rectangle(((x-2, y-1), (width, y+10)), 1)
            draw.text((x, y), option.name, 0 if index == current_menu_option else 1, font)

        w, h = font.getsize('>')
        draw.text((0, (height - h) / 2), '>', 1, font)

        for x in range(width):
            for y in range(height):
                pixel = image.getpixel((x, y))
                lcd.set_pixel(x, y, pixel)

        lcd.show()
        time.sleep(1.0 / 30)

except KeyboardInterrupt:
    cleanup()

有关此刻我的标签的工作，但我不知道，以了解它们完美的工作。谢谢您的帮助。

Answer 1

如果要在每个页面上显示选项卡，请将其放入app.component.html文件中。喜欢：

<ion-app>
 <ion-tab-button tab="tab1">
    <ion-label>Label1</ion-label>
    <ion-icon name="search"></ion-icon>
  </ion-tab-button>
  <ion-tab-button tab="tab2">
    <ion-label>Label2</ion-label>
    <ion-icon name="card"></ion-icon>
  </ion-tab-button>
</ion-app>

请不要忘记立即在app-routing.module.ts中创建您的路由和路由。

Answer 2

将您的路由作为子项添加到选项卡路由器文件中的选项卡将使您实现目标。

如何在所有页面上显示离子选项卡？

2 个答案: