Wie ngModel zwischen den Komponenten verfügbar gemacht werden

Question

Ich bin ernsthaft verrückt. Ich habe alles versucht. FormsModule, ReactiveForms, FORMDIRECTIVES, Input, Output Ich habe überall gesucht, wie man ngModel zwischen Komponenten verfügbar machen kann. Ich versuche, den Wert in einem h1-Tag zu zeigen, die in dem Eingangs-Tag mit String-Interpolation eingegeben/gelöscht wird, aber es funktioniert nicht, das sind die Dateien: 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>

Wenn Sie es herausfinden kann, würde ich so dankbar.

Answer 1

Sie haben tatsächlich gesucht, aber nicht verwendet, die Lösung für Ihr Problem ist @Input und @Output. Ich glaube, du hast das nicht effektiv genutzt.

Da die anderen Komponenten wird durch eine Komponente geregelt genannt AppComponent Sie einfach nur diese Daten in sie setzen müssen:

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 = ""; 
    } 
} 

dann in Ihrem AppComponent Vorlage

<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> 

wo [ ]@Input sind und () sind @Output von der Komponente

so Ihre InputComponent haben:

// 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(); 
} 

wo @Input die Daten Ihrer recieve und @Ouput ist die Daten, die Sie senden.

und Ihre InputComponent Vorlage wäre:

<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> 

wo [(ngModel)] Einstellung mit Ihrem @Input und (ngModelChange)@Output auszulösen, wenn modal geändert hat. In diesem Beispiel können Sie Standardwerte von AppComponent bis InputComponent festlegen.

Wenn Sie @Input richtig in diesem Beispiel verstehen ich nicht brauchen, um umzusetzen, was wäre, innerhalb NotesComponent

Hoffnung, das hilft.