Как решить проблему с декоратором @input при передаче данных от родителя к потомку с помощью set?

Question

Я пытаюсь передать данные из родительского компонента в дочерний компонент, мне удалось передать данные в дочерний компонент с помощью @input, но я хочу, чтобы данные в дочернем компоненте были синхронизированы всякий раз, когда происходит изменение вродительский компонент, я пытался использовать метод set (), но я получаю сообщение об ошибке, так как «если app-chat» является угловым компонентом и имеет вход «childMessage», то убедитесь, что он является частью этого модуля."

это мой фрагмент app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms'
import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { ChatComponent } from './chat/chat.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    AboutComponent,
    ContactComponent,
    HomeComponent,
    ChatComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

дочерний компонент -------

import { DataService } from './../data.service';
import { Component, OnInit, Input } from '@angular/core';
import { ChatObject } from '../chat-object'



@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {

  childVal: any;


  @Input()
  set name(childMessage: any) {
    this.childVal = childMessage;
    console.log("updated child" + this.childVal);
  };

  get name(): any {
    return this.childVal;
  }
}

parent component.ts ------------

message: string;

chatClick(text){
  console.log("inside parent" + text);
  this.message = text;
}

parent component.html ---------

 <app-chat [childMessage]="message"></app-chat>

При выполнении приведенного выше кода я получаюследующая ошибка в браузере

Невозможно выполнить привязку к childMessage, поскольку оно не является известным свойством app-chat.1. Если app-chat является угловым компонентом и имеет вход «childMessage», то убедитесь, что он является частью этого модуля.2. Если 'app-chat' является веб-компонентом, добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ NgModule.schemas» этого компонента.("] [childMessage] =" message ">

Я хочу, чтобы каждый раз, когда вызывается функция chatClick(), я хотел, чтобы значение в дочернем компоненте автоматически обновлялось в этот момент?

Answer 1

Может быть это?

@Input('childMessage')
set name(childMessage:any){
  this.childVal=childMessage;
  console.log("updated child"+this.childVal);
};