ионный маршрутизатор-выход перекрывается ионным коллектором - PullRequest
Новая
       35

ионный маршрутизатор-выход перекрывается ионным коллектором

0 голосов
/ 25 июня 2019

В моем приложении Ionic4 / Angular я поместил верхний и нижний колонтитулы в их собственные компоненты, потому что они одинаковы на каждой странице.Когда я делаю это, ion-router-outlet в основном игнорирует заголовок, а ion-content частично скрывается за заголовком. Конечно, я мог бы добавить к моему контенту верхний отступ (Правка: на самом деле, это тоже не работает, маршрутизатор-розетка всегда использует весь экран - почему?), Но я думаю, что-то еще не так,разве цель ion-content не в том, чтобы быть достаточно умным, чтобы заметить, насколько большим он должен быть?Кстати, это не имеет значения, если я опущу fullscreen in <ion-content>.

основной компонент приложения: 

<ion-app>
    <app-header></app-header>
    <ion-content fullscreen>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
    <app-footer></app-footer>
</ion-app>

заголовок приложения: 

<ion-header>
    <h1>my header</h1>
</ion-header>

app-footer: 

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="foo">
            <ion-label>Foo</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="bar">
            <ion-label>Bar</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

маршруты: 

const routes: Routes = [
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: 'bar',
        loadChildren: './bar/bar.module#BarModule'
    }
]

1 Ответ

0 голосов
/ 29 июня 2019

Нашел решение. <ion-router-outlet></ion-router-outlet> в основном игнорируется, поскольку <ion-tabs> также служит в качестве выходного маршрутизатора и отображает его содержимое в полном окне просмотра, исключая только пространство для панели вкладок. Вот почему <app-header> был перекрыт.

Компонент ion-tabs не имеет стиля и работает как маршрутизатор розетка для управления навигацией.

источник: https://ionicframework.com/docs/api/tabs

Это означает, что я могу просто использовать 

<ion-app>
    <ion-tabs>
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="foo">
                <ion-label>Foo</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="bar">
                <ion-label>Bar</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
</ion-app>

в главном компоненте приложения и поместите <app-header> на отдельных вкладках.

Заголовок является родительским компонентом, который содержит компонент панели инструментов. Это Важно отметить, что ионный заголовок должен быть одним из трех корневые элементы страницы

источник: https://ionicframework.com/docs/api/header

...