javascript - Angular 2 - 获取输入值

Question

我正在学习 Angular 2。为此，我试图通过单击按钮来获取输入的值。

这是我的代码:

import { Component, Input } from '@angular/core'
import Card from './card.component'
import CardTitle from './cardTitle.component'
import Icon from './icon.component'
import CardDescription from './cardDescription.component'

@Component({
  selector: 'jsonTextInput',
  templateUrl: '../templates/jsonTextInput.html',
  directives: [Card, CardTitle, CardDescription, Icon]
})

export class JsonTextInput {
  @Input() ngModel: any;

  process () {
    console.log(this.ngModel)
    alert(1);
  }
}

在模板中:

<card class='jsonTextInput'>
  <cardtitle
    title='Enter your raw json'
  >
    <icon (click)='process()' name='tick'></icon>
  </cardtitle>
  <carddescription>Write or paste your json here, and press Process to start navigating</carddescription>
  <section class='content'>
    <textarea #json [(ngModel)]="json"></textarea>
  </section>
</card>

进程正在正确运行。但 console.log 返回 undefined。

知道如何在单击按钮时读取输入的值吗？

Answer 1

也许您没有正确使用输入和其他内容，让我解释一下。

输入用于以属性形式将数据注入(inject)到组件中，如下所示:

<jsonTextInput [my-input]="'this is a text :D'"></jsonTextInput>

您可以像这样在组件中获取该数据:

import { Component, Input } from '@angular/core'
import Card from './card.component'
import CardTitle from './cardTitle.component'
import Icon from './icon.component'
import CardDescription from './cardDescription.component'

@Component({
  selector: 'jsonTextInput',
  templateUrl: '../templates/jsonTextInput.html',
  directives: [Card, CardTitle, CardDescription, Icon]
})

export class JsonTextInput {
  @Input('my-input') myInput: any;         //Here es saved: "this is a text :D"
  json:String = "Hi i'm a message";        //You must declarate all models in the component

  process () {
    console.log(this.myInput); //this print: "this is a text :D"
    alert(1);
  }
}

现在，为了打印文本区域中的文本，如下所示:

  process () {
    console.log(this.json); //this print: "Hi i'm a message"
    alert(1);
  }

您的模板必须如下所示:

<card class='jsonTextInput'>
  <cardtitle
    title='Enter your raw json'
  >
    <icon (click)='process()' name='tick'></icon>
  </cardtitle>
  <carddescription>Write or paste your json here, and press Process to start navigating</carddescription>
  <section class='content'>
    <textarea [(ngModel)]="json"></textarea><!-- You only need #json if you are working whit forms -->
  </section>
</card>

仅此而已。