为离子应用创建一个常见的标题元素会在-prod build中引发错误

Question

我一直在开发一个Ionic 3应用程序，该应用程序具有一些页面，其中包含一个常见的标头，并且标题内部的元素差异很小。为了避免代码重复并保持干燥，我试图为此标头创建可重复使用的组件，并将其包含在所需的每个页面中。

在此组件中，我几乎没有属性，我用来通过属性结合来控制元素的差异。在开发构建中一切都很好。但是今天，当我尝试创建一个 - 生产构建时，它显示了以下错误。

Error: Template parse errors:
Can't bind to 'isHome' since it isn't a known property of 'ion-header'.
1. If 'ion-header' is an Angular component and it has 'isHome' input, then verify that it is part of this module.
2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  Ionic pages and navigation.
-->
<ion-header clean-header [ERROR ->][isHome]="true" (refresh)="refresh($event);"></ion-header>

我将附加以下代码，单个文件，我知道这是一个问题，因为我误解了Angular4/ionic3的依赖项注入和模板绑定结构。但是我无法理解给定的错误，我尝试了错误本身中列出的3个解决方案，但是我仍然缺少某些内容，并且错误保持不变。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { StatusBar } from '@ionic-native/status-bar';
import { LaunchNavigator} from '@ionic-native/launch-navigator';
import { MyApp } from './app.component';
import { Header } from '../pages/header/header';
import { HomePage } from '../pages/home/home';
import {AssignmentDetailPage} from '../pages/assignment-detail/assignment-detail';
import { LoginPage } from '../pages/login/login';
import {ReportIssuePage} from '../pages/report-issue/report-issue';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { BaseUrl, Base } from './config/config.constants';
import { LoadingInterceptor } from '../interceptors/loading.interceptor';
import { DataStoreProvider } from '../providers/data-store/data-store';
import { HomeServiceProvider } from '../providers/home-service/home-service';
import { SessionInterceptor } from '../interceptors/session.interceptor';
import { AssignmentStatusProvider } from '../providers/assignment-status/assignment-status';
import { Camera } from '@ionic-native/camera';
import { File} from '@ionic-native/file';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    Header,
    AssignmentDetailPage,
    ReportIssuePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp, {
      mode : 'md',
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    AssignmentDetailPage,
    ReportIssuePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide:Base, useValue:BaseUrl},
    {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi:true},
    {provide: HTTP_INTERCEPTORS, useClass: SessionInterceptor, multi:true},
    AuthServiceProvider,
    DataStoreProvider,
    Camera,
    File,
    HomeServiceProvider,
    AssignmentStatusProvider,
    LaunchNavigator,
  ]
})
export class AppModule {}

header.module.ts

import { NgModule } from '@angular/core';
import { Header } from './header';
@NgModule({
  declarations: [
    Header,
  ],
  imports: [
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

header.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { AlertController, NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { LoginPage } from '../login/login';
import { HomeServiceProvider } from '../../providers/home-service/home-service';
@Component({
  selector: '[clean-header]',
  templateUrl: 'header.html',
})
export class Header {
  @Input() isHome: boolean = false;
  @Output() refresh: EventEmitter<any> = new EventEmitter();
  public user: any;
  constructor(public Auth: AuthServiceProvider, public nav: NavController,
     public alertCtrl: AlertController, public HomeService: HomeServiceProvider) {
    this.user = Auth.getUserData();
  }

header.html

  <ion-navbar hideBackButton>
    <div text-center>
    <img class="header-logo" src="./assets/imgs/clean_connect.png" alt="Logo of clean connect">
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-8>
          <div class="name-section">
            <h4 class="header-username">{{user.userName | uppercase}}</h4>
            <p>{{user.firstName +', '+ user.lastName}}</p>
          </div>
        </ion-col>
        <ion-col col-4 class="nav-controls">
          <a (click)="refreshData()" *ngIf="isHome"><img src="./assets/imgs/ic_refresh.png"   alt="Logo of Refresh"></a>
          <a (click)="goHome();" *ngIf="!isHome"><img src="./assets/imgs/home.png"   alt="Logo of Home"></a>
          <a (click)="logout()"><img src="./assets/imgs/logout.png"   alt="Logo of Logout"></a>
        </ion-col>
        <ion-col col-2 class="nav-controls">
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-navbar>

最后，我在其他地方使用此组件，

home.html

<ion-header clean-header [isHome]="true" (refresh)="refresh($event);"></ion-header>
<ion-content>

我尝试将其用作自定义元素而不是属性，但是由于离子头和离子含量之间的自定义元素，它不会产生所需的布局，我找不到进入的方式使用像Angular1中的trantlusion一样。

我知道这个问题很长，但是我不能做一个工作的小提琴。谁能帮我？

Answer 1

注意：尽管上述有关最佳实践的建议，但我还是有类似的错误创建组件，因此为其他搜索错误的人提供答案。就我而言，我只是有一个普通的旧组件，并且有同样的错误，只是它抱怨离子标签。这是我第一次带我进行了一些挖掘，反复试验和错误。我发现该文档对该主题尚不清楚，或者也许我只是没有设法用正确的Google Google。

您需要将IonicModule导入到您的header.module.ts以及app.module.ts中，即

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { Header } from './header';
@NgModule({
  declarations: [
    Header,
  ],
  imports: [
    IonicModule      // <-- add here
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

请注意，现场重新加载可能会第一次错过此更改，因此请杀死和重新启动离子发挥以确保。

以下错误报告评论帮助我解决了：https://github.com/angular/angular/issues/14288#issuecomment-282531453https://forum.ionicframework.com/t/ionic-3-0-shared-component/91727/2

Answer 2

我找到了答案。

，但根据离子团队的建议，明智的明智 将通用标头放在每个页面上，因此将标题放在每个页面上 内部设计决策。感谢Sebaferreras的建议。我不建议您在不考虑成本的情况下进行以下操作。但是我想证明这是可能的。

。

，但我仍然想实现它，因为我的离子标头具有一些中级复杂功能，而且我在我使用的每个页面上都无法复制它们。我按照下面实施了

1）从app.module.ts删除对模块/component.ts的任何引用，从app.module.ts，

中删除组件的任何导入

2）导入ionicModule在标题（可重用）模块的导入部分（header，module.ts）

import { NgModule } from '@angular/core';
import { Header } from './header';
import {IonicModule} from "ionic-angular";
@NgModule({
  declarations: [
    Header,
  ],
  imports: [
    IonicModule
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

然后在每个其他页面的模块中导入HeaderModule，请记住在component.ts文件中，而是在该文件的模块中。

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import {HeaderModule} from "../header/header.module";
@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    HeaderModule,
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

这可以按预期工作，我没有注意到任何副作用，对于该动画部分，我们当前的项目并不在乎为标题动画，因此，对于我的用例，这不是问题。相应地检查您的用例。