Question

我正在尝试创建一个内联输入编辑组件。

它已正确加载，但看起来@Input()变量始终未定义。

mypage.html

...
<app-inputinline
            [name]="username"
            [fieldValue]="myname"
            [isRequired]="true"
            (updateValue)="saveField('username', $event)"></app-inputinline>
...

inputinline.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Input, EventEmitter, Output, ViewChild, Renderer } from '@angular/core';

    @Component({
      selector: 'app-inputinline',
      templateUrl: './inputinline.component.html',
      styleUrls: ['./inputinline.component.scss'],
    })
    export class InputinlineComponent implements OnInit {

      @Input() name:string;
      @Input() fieldValue:string;
      @Input() isRequired:string;
      @Input() minLength:string;
      @Input() maxLength:string;

      @Output() updateValue: EventEmitter<any> = new EventEmitter();

      @ViewChild('container') container;

      public value:any;
      public isEditView:boolean = false;
      public docEditUnlisten:any;

      constructor(
                  private renderer:Renderer
                  ) { }

      ngOnInit(){
        console.log(this.fieldValue);      <============ THIS SHOWS UNDEFINED
      }

      showEditable()
      {
        this.value = this.fieldValue;
        this.isEditView = true;

        this.docEditUnlisten = this.renderer.listenGlobal('document', 'click', (event) => {
          if(!this.container.nativeElement.contains(event.target)){
            this.showDetail();
          }
        });
      }

      save(){
        this.updateValue.emit(this.value);
      }

      showDetail(){
        this.isEditView = false;
      }

    }

inputinline.component.module.ts

    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';

    import { InputinlineComponent } from './inputinline.component';

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
      ],
      declarations: [
        InputinlineComponent
      ],
      exports: [
        InputinlineComponent
      ],
      entryComponents: [
      ],
    })
    export class InputinlineComponentModule {
    }

inputinline.component.html

    ...
    <span class="editable-click">
      => {{fieldValue}}
      <div #container class="editable-container editable-inline">
      ...

如您所见，我正在尝试显示=> {{fieldValue}}，但是它为空，在组件ngOnInit中也显示为undefined。

我做错什么了吗？

Answer 1

绑定到字符串而不是变量myname（该字符串将存在于mypage.ts中）

<app-inputinline
            [name]="username"
            [fieldValue]="'myname'"
            [isRequired]="true"
            (updateValue)="saveField('username', $event)"></app-inputinline>

组件未收到@Input（）变量

1 个答案: