Pages中的Ionic2自定义组件

时间:2017-12-13 14:29:05

标签: ionic2

您好我使用ionic作为PWA。我使用页面进行导航,我开发了一个名为common-header的组件,它显示了用户名和页面名称。它接受一个名为HeaderTitle的输入,它显示了title。组件在components.module.ts中声明,我在componentmodule中导入PageModule。当我在页面中使用组件时,组件css样式无法按预期工作。

如果我删除了componentmodule中CommonHeader组件的声明并在pagemodule中定义了UI看起来不错。

这是CommonHeader的HTML代码。

<ion-navbar hideBackButton>
      <ion-title>
         {{UserName}}
      </ion-title>
      <ion-title>
         {{HeaderTitle}}
      </ion-title>
</ion-navbar>

以下是我页面的Html代码

<ion-header>
   <tr-header [HeaderTitle]="HeaderTitle"></tr-header>
 </ion-header>

 <ion-content padding>
     Page Content
 </ion-content>

问题是CSS看起来很奇怪,因为按钮没有正确的颜色/高度。如果我在componentmodule.ts中声明一个组件并在我的页面模块中使用componentmodule文件,则会发生这种情况。

如果我在我的页面模块中声明组件,它只能很好用。但我需要在所有页面中使用我的自定义组件。 在上述情况下,有人可以指导我做错了什么。

谢谢

0 个答案:

没有答案