如何使 ngModel 在组件之间可用

Question

我真的快要生气了。我已经尝试了一切。 FormsModules,ReactiveForms,FORMDIRECTIVES,Input,Output 我一直在到处寻找如何让 ngModel 在组件之间可用。我试图在 h1 标签中显示使用字符串插值在输入标签中 typed/deleted 的值，但是它不起作用，这些是文件： 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>

如果你能弄明白，我将不胜感激。

Answer 1

你其实搜索过但没有使用，你的问题的解决方法是@Input和@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>

使用 @Input 和 (ngModelChange) 设置 [(ngModel)] 以在模态更改时触发 @Output。

在此示例中，您实际上可以设置从 AppComponent 到 InputComponent 的默认值。

如果您在这些示例中正确理解 @Input，我不需要将内容放在 NotesComponent

中

希望对您有所帮助。

如何使 ngModel 在组件之间可用

How to make ngModel available between components

javascript

ngmodel

angular

two-way-binding