-3

我真的很生气。我已经尝试了一切。FormsModules，ReactiveForms，FORMDIRECTIVES，Input，Output 我一直在到处寻找如何使 ngModel 在组件之间可用。我试图在 h1 标记中显示正在使用字符串插值在输入标记中输入/删除的值，但是它不起作用，这些是文件：app.component.html：

<div class="container text-center" id="headerCont">
  <a href="index.html"><span style="color: #6E2435" class="header">note</span><span style="color: #6BBFDE" class="header">it</span></a>
</div>
<div class="container">
  <app-input></app-input>
  <app-notes></app-notes>
</div>

app.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

notes.component.html

<div class="col-xs-2">
  <h1>{{ TitleInput }}</h1>
  <p>{{ noteInput }}</p>
</div>

input.component.html

<div class="container" id="noteCreate">
  <form id="titleInputForm">
    <input type="text" [(ngModel)]="TitleInput" name="TitleInput">
  </form>
  
<form>
    <textarea name="name" rows="8" cols="80">
    </textarea>
</form>
</div>
如果你能弄清楚，我将不胜感激。

4

1 回答 1

0

您实际上搜索了它但没有使用它，您的问题的解决方案是@Inputand @Output。我相信你没有有效地使用它。

由于其他组件由一个名为的组件管理，AppComponent您只需将这些数据放入其中：

import { Component } from '@angular/core';
// The other imports are not necessary

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent
{
   // declare those stuffs
   title: string;
   note:  string;

   constructor()
   {
        this.title = "";
        this.note  = "";
   }
}

然后在你的AppComponent模板中

<div class="container">
  <app-input [title]="title"
             [note]="note"
            // you should return $event always or else it will return undefined
             (onTitleChange)="title = $event"
             (onModelChange)="note = $event">
  </app-input>
  <app-notes [title]="title"
             [note]="note">
  </app-notes>
</div>

组件[ ]在哪里@Input和( )从哪里来@Output

所以你InputComponent将拥有：

// add these to your existing InputComponent
import { Input, Output, EventEmitter } from "@angular/core";

export class InputComponent
{
  @Input("title") title: string;

  @Input("note") note: string;

  @Output() onTitleChange = new EventEmitter();

  @Output() onNoteChange = new EventEmitter();
}

@Input您收到的数据在哪里，@Ouput您发送的数据在哪里。

你的InputComponent模板是：

<div class="container" id="noteCreate">
  <form id="titleInputForm">
    <input type="text"
           name="title"
         [(ngModel)]="title"
          (ngModelChange)="onTitleChange.emit(title)">
    <textarea name="note"
              rows="8"
              cols="80"
            [(ngModel)]="note"
             (ngModelChange)="onNoteChange.emit(note)">
    </textarea>
  </form>
</div>

当模态改变时，[(ngModel)]用你的@Inputand设置(ngModelChange)触发。@Output

在此示例中，您实际上可以将默认值设置为AppComponent至InputComponent。

如果你@Input在这些例子中理解正确，我不需要把里面的内容NotesComponent

希望有帮助。

于 2017-09-02T01:26:01.390 回答