如何使可用的組件

Question

我很認真地惹毛之間ngModel。我已經嘗試了一切。 FormsModules，ReactiveForms，FORMDIRECTIVES，輸入，輸出我一直在搜索無處不在的組件之間如何使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>

如果你自己看着辦吧，我會非常感激。

Answer 1

實際上，你搜索，但沒有使用它，解決你的問題是@Input和@Output。我相信你沒有有效地使用它。

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

由於其他組件是由一個名爲AppComponent你只是單純的需要把它的數據組件管轄()是@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)]你@Input和(ngModelChange)觸發@Output當模式發生了變化。

在這個例子中，你實際上可以設置默認值從AppComponent到InputComponent。

如果你在這些例子正確理解@Input我並不需要把將裏面NotesComponent

希望幫助什麼。