Question

我对Ionic 3和Angular相当新，我遇到了一些有点困惑的事情，因为看起来我正在做所有正确的事情，但我在标题中得到了错误。< / p>

我有一个指令我正在尝试应用于一个强制输入为小写的字段：

import {Directive, Input, Output, EventEmitter, OnInit} from '@angular/core';

@Directive({
    selector: '[lowercase]',
    host: {
        '[value]': 'lowercase',
        '(input)': 'format($event.target.value)'
    }
})
export class LowercaseDirective implements OnInit {

    @Input() lowercase: string;
    @Output() lowercaseChange: EventEmitter<string> = new EventEmitter<string>();

    constructor() {
    }

    ngOnInit() {
        this.lowercase = this.lowercase || '';
        this.format(this.lowercase);
    }

    format(value) {
        value = value.toLowerCase();
        this.lowercaseChange.next(value);
    }
}

我已将DirectivesModule添加到我的主app控制器：

import { NgModule } from '@angular/core';
import { LowercaseDirective } from './lowercase/lowercase';
@NgModule({
    declarations: [LowercaseDirective],
    imports: [],
    exports: [LowercaseDirective]
})
export class DirectivesModule {}

但是当我尝试将其添加到我的登录页面时，就像这样：

<ion-content padding class="master">

    <div class="error-message" *ngIf="error !== ''">
        {{error}}
    </div>
    <ion-list>
      <form #loginForm="ngForm" 
            (ngSubmit)="userLogin(loginForm)">
        <ion-item>
          <ion-label for="name" stacked>username</ion-label>
          <ion-input 
            required
            ngModel 
            [(lowercase)]="login"
            name="login" 
            type="text" 
            id="login" 
            #login="ngModel"></ion-input>
        </ion-item>
        <div class="warnings" *ngIf="login.touched && !login.valid">username is required!</div>
        <ion-item>
            <ion-label for="password" stacked>password</ion-label>
            <ion-input 
              required
              ngModel
              #password="ngModel"
              name="password" 
              type="password" 
              id="password" ></ion-input>
          </ion-item>
          <div class="warnings" *ngIf="password.touched && !password.valid">password is required!</div>
          <button  
            class="button"
            [disabled]="!loginForm.valid" 
            ion-button color="primary" 
            round 
            full 
            type="submit">Login</button>
        </form>
    </ion-list>

<a class="go-to-reset" (click)="goToResetPassword()">Whoops. I forgot my login...</a>

</ion-content>

我的login.component.ts上的导入如下所示：

import { AuthenticationProvider } from './../../providers/authentication/authentication';
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import 'rxjs/add/operator/do';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  error = '';


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private auth: AuthenticationProvider) {
  }

  ngOnInit(){
    console.log('Member Info: ', this.auth.memberInfo());
  }
...

我收到以下错误：

无法绑定到'小写'，因为它不是'ion-input'的已知属性

我错过了什么？

Answer 1

声明（组件，指令，管道）仅在导入它们的模块中可用。提供程序（服务）在全局应用程序中可用，多次导入服务将导致新实例重置服务。

您可以在angular.io上找到Why is a service provided in a feature module visible everywhere?的解释：

这是设计的。通过NgModule导入的可扩展性是主要的 NgModule系统的目标。将NgModule提供程序合并到应用程序注入器使模块库很容易丰富整个应用程序与新服务。通过添加HttpClientModule 一次，每个应用程序组件都可以发出HTTP请求。

为了更好地理解，I recommand this article by Cyrille Tuzi。

无法绑定到'lowercase'，因为它不是'ion-input'的已知属性

1 个答案: