Блог

У меня было существующее приложение Angular 12, в которое я добавил Ionic. Это приложение было PWA, и мы хотим использовать Ionic для его компиляции в Android и IOS и будем использовать некоторые собственные функции через конденсатор.

В настоящее время я пытаюсь добавить компонент вкладок и хочу, чтобы компонент вкладок отображал только то, находимся ли мы на мобильной платформе.

Мой app.component.html выглядит так

 <router-outlet></router-outlet>

<div class="loading" *ngIf="loading">Loadingamp;#8230;</div>

<ion-tabs *ngIf="mobile">
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>Schedule</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="account" *ngIf="!authenticated">
        <ion-icon name="person-circle"></ion-icon>
        <ion-label>Account</ion-label>
      </ion-tab-button>
    
      <ion-tab-button tab="chat" *ngIf="displayChat amp;amp; authenticated">
        <ion-icon name="chatbox"></ion-icon>
        <ion-label>Chat</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="settings">
        <ion-icon name="cog"></ion-icon>
        <ion-label>settings</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
 

Я попытался прочитать документацию по привязке этого к угловой маршрутизации, но все примеры, которые я вижу, взяты из приложения angular, созданного с помощью Ionic, а не из приложения Angular с добавлением Ionic. Следовательно, существует страница навигации по вкладкам, на которой находится TabHTML. В конечном счете, я хочу, чтобы это работало из app.component, поэтому я обновил app-routing.module.ts до следующего

 import { LoginComponent } from './user/components/login/login.component';

const routes: Routes = [{
  path: 'account',
  component: LoginComponent,
  children: [
    {
      path: '',
      loadChildren: () => import('./user/user.module').then(m => m.UserModule)
    }
  ]
}];
 

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю на вкладку Учетная запись, компонент входа не зарегистрирован. В консоли отображается «вкладка с идентификатором: «не определено» не существует»

Я не понимаю, почему он не определен, когда у меня определен атрибут Tab кнопки ion-tab