Question

我有一个文件夹包含我的自定义组件页面，结构为：

show-hide-password
  |-- show-hide-container.ts
  |-- show-hide-input.ts
  |-- show-hide-password.html
  |-- show-hide-password.scss
component.module.ts

这是我的show-hide-container.ts的样子：

import { Component, ContentChild } from '@angular/core';
import { ShowHideInput } from './show-hide-input'

@Component({
  selector: 'show-hide-container',
  templateUrl: 'show-hide-password.html',
  host: {
    'class': 'show-hide-password'
  }
})
export class ShowHideContainer {
  show = false;

  @ContentChild(ShowHideInput) input: ShowHideInput;

  constructor(){}

  toggleShow() {
    this.show = !this.show;
    if (this.show){
      this.input.changeType("text");
    }
    else {
      this.input.changeType("password");
    }
  }
}

我想将主机与第二类绑定，以满足我的第一类组件的需求，第二类组件是show-hide-inputs.ts看起来像这样：

import { Directive, HostBinding, ElementRef } from '@angular/core';

@Directive({
  selector: '[show-hide-input]'
})
export class ShowHideInput {
  @HostBinding() type: string;

  constructor(public el: ElementRef) {
    this.type = 'password';
  }

  changeType(type:string) {
    this.type = type;
    this.el.nativeElement.children[0].type = this.type;
  }
}

我还将这些类组件添加到components.module.ts中，以便在组件和页面之间共享，这是我的文件：

import { ShowHideContainer } from './show-hide-password/show-hide-container';
import { ShowHideInput } from './show-hide-password/show-hide-input';
@NgModule({
    declarations: [
        ShowHideContainer,
        ShowHideInput
    ],
    imports: [],
    exports: [
        ShowHideContainer,
        ShowHideInput
    ]
})
export class ComponentsModule {}

接下来，我是adding the component module into app module in the app folder，也是import component module into selected Ionic pages，这里发生了错误。我选择的Ionic页面将无法响应共享组件，例如，这是我的HTML页面：

<show-hide-container>
  <ion-item>
    <ion-input type="password" placeholder="Password" formControlName="password" show-hide-input></ion-input>
  </ion-item>
</show-hide-container>

您可以看到，show-hide-container是我共享的自定义组件，而ion-input是Ionic的默认组件。错误是：

RROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'type' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'type' input, then verify that it is part of this module.
2. If 'ion-input' 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. ("
    <show-hide-container>
      <ion-item>
        [ERROR ->]<ion-input type="password" placeholder="Password" formControlName="password" show-hide-input></ion-in"): ng:///SignupPageModule/SignupPage.html@20:8, Directive ShowHideInput

也许有人可以帮助我？预先感谢。

导入页面时出现Angular 5主机绑定组件错误

0 个答案: