标签: ionic4

上下文：我有一个经过身份验证的用户遵循的课程列表。我希望能够在 ion-title 标题中显示所有课程的标题，并在页面内容中显示与所选课程相关的详细信息。

问题：我想在 ion-title 中仅显示当前课程名称而不添加标签，并仅在选择模式标题上显示标签“课程列表”。我尝试删除离子标签，但显示选择模式无标题..

这就是我想要的：标题：

选择模态：

这就是我得到的：

保留离子标记时

去除离子标记时

我的代码：

<ion-item lines="none">
     <ion-label>Courses List</ion-label>
     <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
      <ion-select-option *ngFor="let course of courses" [value]="course.id">
       {{course.title}}
      </ion-select-option>
    </ion-select>
 </ion-item>

在我的 Ionic 4 项目中，我有选项卡式界面，其中有 4 个选项卡。

我尝试ion-tab通过添加一些自定义 css 来自ion-tab-bar定义圆角，如下所示。

我使用以下代码来实现此设计。

ion-tab-bar {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

ion-tab-button {
    transition: 0.2s ease-in;
}

.tab-selected {
    border-bottom: 4px white solid;
    // transition: 0.2s ease-in;
    font-size: 0;
    ion-icon {
        transform: scale(1.3);
        transition: 0.2s ease-in;
    }
}

我在这里面临的问题是，顶部有一个白色背景，重叠在我在所选选项卡页面上显示的卡片上。

我不知道为什么卡片上会出现白色背景。我希望它是透明的。我尝试通过scss选项卡组件文件更改背景颜色，但这对我不起作用。我怎样才能删除ion-tab-bar.

发生未处理的异常：在集合“@ngxs/schematics”中找不到原理图“页面”。

我正在开发具有最佳UI的ionic 4的一个业务应用程序，我正在寻找日历/日期选择器的良好组件。我不想使用其本机典型组件。在此感谢您的帮助。

我正在使用Angular 7开发Ionic 4.0.0 App，并且尝试将侧面菜单与辅助页面上的选项卡结合在一起。让我们看看它是如何工作的：

• 左侧窗格的左侧菜单，然后右侧的侧面菜单中有一个带有列表的简单视图。
• 单击列表上的项目时，它将导航到一个页面，其中有4个选项卡以显示与该项目相关的一些数据。

我面临两个主要问题：

• 向后拖动时，它不会执行任何操作。我将菜单移至creen的右侧，以尝试避免事件冲突。
• 单击初始列表中的项目并使用选项卡路由到第二页时，将触发整页重新加载。这实际上是最烦人的部分。恐怕我在角度路由器上做错了什么。

基本上，在主路由模块上，我检查身份验证，如果用户未通过身份验证，则显示登录页面，并保护子路由。为了简单起见，我省略了此代码。

然后，我将/app/AppRoutingModule加载所有受保护的路由，看起来像这样（省略一些行）：

const routes: Routes = [
    {...},
    {
        path: 'communities',
        loadChildren: './communities/communities-routing.module#CommunitiesRoutingModule',
    },
    {...}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

到达路径/ app / communities时，子路由模块CommunitiesRoutingModule被加载，看起来像这样：

const routes: Routes = [
    {path: '', loadChildren: './communities.module#CommunitiesPageModule'}, // Page with a list of all communities.
    {path: 'view/:id', loadChildren: './view-community/tabs/tabs.module#TabsPageModule'}, //Loads the tabs page module
    {...} //Loads other sub-tabs.
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule] …

我是Ionic 4的新手，正在尝试使SQLite工作。我添加了cordova插件和ionic native sqlite，但是当我尝试在应用模块中进行设置时，出现上述错误。这是我的应用程序，module.ts

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { IonicStorageModule } from '@ionic/storage';
import { SQLite } from '@ionic-native/sqlite';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

有人可以帮忙吗？

我是Ionic 4的新手，想在Ionic4中设计可滚动的选项卡。但是，当我添加以下代码所示的多个选项卡时，它们会缩小并在同一视图空间中显示。

<ion-tab-bar slot="top">
    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>
</ion-tab-bar>

这就是上面的代码的样子

请帮忙。

我在Ionic 4应用程序中工作，我想更改工具栏的背景颜色，但是它不起作用。

我尝试过的

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

喜欢：

颜色：var（-ion-color-contrast）;

在哪里定义--ion-color-contrast。在variables.scss文件中或其他用于更改颜色的位置。

任何人都可以帮助我如何variables.scss在Ionic 4中定义变量以更改颜色。

我正在运行ionic 4应用程序

我创建了一个消息组件，该组件相应地加载了传递@Input给它的错误。

<control-messages [control]="saveUserForm.get('age')"></control-messages>

因此它将加载FormControl验证并显示我在服务中定义的自定义消息；

我想知道的是，如果有某种方法可以向组件发送多个属性，我想<p class='help'></p>用success | warn | danger

这是组件：

  @Component({
    selector: 'control-messages',
    template: `<p class="help" *ngIf="errorMessage !== null">{{errorMessage}}</p>`
  })
  export class ControlMessagesComponent {
    @Input() control: FormControl;

    constructor() { }

    get errorMessage() {
      for (const propertyName in this.control.errors) {
        if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
          return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
        }
      }
      return null;
    }
  }

我如何通过父级发送另一个参数以将其加载到模板中{{color}}，如

    template: `<p class="help {{color}}" *ngIf="errorMessage !== null">{{errorMessage}}</p>`