Ошибка углового связывания компонента 5 при импорте в страницу - PullRequest
Новая
       15

Ошибка углового связывания компонента 5 при импорте в страницу

0 голосов
/ 02 декабря 2018

У меня есть одна папка, содержащая мою пользовательскую страницу компонента, структура: 

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, здесь происходит ошибка.Моя выбранная ионная страница не сможет отвечать на общий компонент, например, вот моя 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 - это мой общий настраиваемый компонент и ионный вводэто ионный компонент по умолчанию.Ошибка: 

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

Может, кто-нибудь может мне помочь?Заранее спасибо.

...