标签: ionic3

我有一个组件 HeroLogoComponent，它在我的应用程序的每个页面的标题元素中使用。它在 app.module 中声明为：

@NgModule({
  declarations: [
  MyApp,
  HeroLogoComponent,
], ...

通过阅读 angular.io 文档，我了解到这应该允许<hero-logo>在每个其他 PageComponent 中使用选择器。但是，当我将其添加到任何其他页面时，我收到错误

Error: Uncaught (in promise): Error: Template parse errors: 'logo' is not a known element

当我更改 PageComponentModule 以包含schemas: [CUSTOM_ELEMENTS_SCHEMA]应用程序加载但该组件仅在 HTML 中显示为空时

<hero-logo><hero-logo>

里面没有任何模板元素。我宁愿声明/导入此组件一次以便在整个应用程序中使用，而不是在每个单独的 PageComponentModule 中使用。有没有办法做到这一点，以便它可以在全球范围内引用？

谢谢！

编辑：

因此，在 app.module.ts 中，引导程序是 IonicApp，因为它是 ionic 生成的项目。

bootstrap: [IonicApp],

引导程序中声明的组件是否全局可用？如果是这样，我将如何从 IonicApp 声明它？

我编写了这段代码，用于在滚动超过 500px 后显示按钮，但“showButton”没有获得新值。

<ion-content (ionScroll)="onScroll($event)">
    <button *ngIf="showButton">Scroll Top</button>
</ion-content>

我的.ts 文件：

showButton= false;

onScroll($event) {    
  if ($event.scrollTop > 500) {
    console.log(this.showButton);
    this.showButton= true;
  }
}

这个console.log显示了“showButton”的变化，但在html中它没有变化。

“showButton”第一次获取值“false”，但是当值更改为“true”时，它无法监听更改，我该如何解决这个问题？

我想将数字输入的输入绑定到我的打字稿文件中的变量。我认为 ngModel 是合适的，并输入了一个输入：<input [{ngModel}]="tRating" type="number" min="1" max="10">tRating 的类型为 .ts 文件中的数字。不幸的是我收到一个错误：

Can't bind to '{ngModel}' since it isn't a known property of 'input'. ("   
        <input [ERROR ->][{ngModel}]="pRating" type="number" min="1" max="10">

我尝试了 3-4 个 npm 模块来屏蔽我的离子输入，使信用卡号码为 4 组。

但每个模块都有自己的模块错误。

我想将我的离子输入屏蔽为 4 个一组（信用卡号。）

注：应该有一些描述问题，请忽略。

我使用 ion-icon 作为

.html

<ion-icon name="ios-thumbs-up-outline" [style.color]="'#EF3B51'"></ion-icon>

当我这样做时，图标的轮廓变为红色，但我想在图标内的空白区域填充红色。

您可以看到下图：

如何使模态屏幕像此链接一样圆润？

我的CSS代码是：

.modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 25% 15%  !important;
   display: block;
   border-radius: 25px;
 }

模态.html

   <ion-content>
     <div class="subtitulo">
       <h4>Select your city</h4>
     </div>

    <ion-list>
      <button ion-item *ngFor="let cidade of cidades" (click)="selCidade(cidade)" detail-none>
        <h3 text-wrap>{{ cidade.nome }}</h3>
        <ion-icon name="ios-arrow-forward" item-right></ion-icon>
      </button>
     </ion-list>
   </ion-content>

但边界半径没有影响。我尝试了一些教程，但没有人有效果。

对于这种情况，我需要一些 CSS 帮助

谢了，

我想渲染动态选项卡，但我无法执行此操作。首次选项卡渲染良好，但当我们更改refreshTabs函数参数时，其选项卡会显示首次渲染选项卡。假设第一次加载APP_TEACHER_TABS元素，当它改变时，ADMIN它会渲染APP_TEACHER_TABS，APP_ADMIN_TABS但我只想渲染APP_ADMIN_TABS。

根选项卡.ts

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
import {TabInterface} from "../../models/tabsModels";
import {AuthProvider} from "../../providers/auth";
import {APP_ADMIN_TABS, APP_STUDENT_TABS, APP_TEACHER_TABS} from "../../constants";
import {SwitchAccountService} from "../../providers/switch-account";

@IonicPage({
  name: 'page-root-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-root-tabs',
  templateUrl: 'root-tabs.html',
})
export class RootTabsPage{

  tabs =[];
  userLabel: any;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeTabs();

  }

  initializeTabs(){ …

我用于ion-select选择一个选项，我想更改 的文本颜色ion-option。我的代码如下...

<ion-item>
    <ion-select interface="popover" [(ngModel)]="selectedGrp" (ionChange)="changeGrp()">  
        <ion-option value="" selected disabled>Select</ion-option>
        <ion-option *ngFor="let item of List;let i = index" [value]="item">{{item.name}} </ion-option>
    </ion-select>
</ion-item>

没有 SASS 变量来执行此操作。我尝试过使用 css 和样式，但它不起作用。谁能帮我改变ion-option文字颜色？

我需要进行以下输入，以便它只接受数字：

<ion-input formControlName="quantity"></ion-input>

我知道这可以通过 type=number 来实现，但由于其他原因我只能使用类型文本。是否可以通过输入文本来做到这一点？另外我如何验证最小和最大金额？

我想提供一个选项，允许用户ion-select在选择后决定不选择某个选项时清除表单字段，但我很难找到任何可以提供帮助的内容。

<ion-item class="formField ionField">
        <ion-label color="primary" stacked>PROJECT</ion-label>
        <ion-select
          #projectName
          ngModel
          name="project"
          interface="action-sheet">
          <ion-option (ionSelect)="projectSelect(project.ProjectName,i)" [value]={ID:project.ID,Name:project.ProjectName} *ngFor="let project of projectArray; let i = index" >{{project.ProjectName}}</ion-option>
        </ion-select>
      </ion-item>

<ion-option (ionChange)="resetValue()">Reset</ion-option>

任何帮助表示赞赏。