Функция не распознается в угловом проекте

Question

У меня есть кнопка, которая после нажатия выводит все, что было введено в пользовательский ввод.

Однако моя функция, которая назначает пользовательский ввод переменной, не распознается по какой-то странной причине?

app.component.html:

<div style="text-align:center">
<h1>Word Hider</h1>
 <p></p>
   <input type="text" class="wordHide" value="Insert Text">
 <p></p>
   <button  id='userIn' (click)='takeUserStr()'>Submit!</button>
<p></p>
   <button>Hide Word!</button>
<div>
  Your Word Is: {{ userWord }}
</div>
</div>

app.module.ts:

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule, OnInit } from '@angular/core';


import { AppComponent } from './app.component';


  @NgModule({
     declarations: [
     AppComponent,
   ],
 imports: [
  BrowserModule
  ],
 providers: [],
 bootstrap: [AppComponent]
  })
export class AppModule {
userWord = 'this is a test';
  ********************function***********************
  takeUserStr(event: any) {
    this.userWord = (<HTMLInputElement>event.target).value;
  }

}

Answer 1

Компоненты по своей природе изолированы, они понимают только то, что присутствует в их context (этом), что бы вы ни хранили в своем классе. В дополнение к этому он также распознает Input + Output привязок + Injectors

Вы сохранили свою функцию в AppModule, которая недоступна для вашего компонента template. Вы должны переместить это function к вашему app.component.ts

По сути, все, что связано с html вашего компонента, что вы должны переместить внутрь app.component.ts

@Component({...})
export class AppComponent {
  userWord = 'this is a test';

  takeUserStr(event: any) {
     this.userWord = (<HTMLInputElement>event.target).value;
  }
}

Также передайте $event объект как в параметре функции takeUserStr.

(click)='takeUserStr($event)'

---

Хотя моя рекомендация реализовать этот сценарий с использованием @angular/forms, либо на основе модели, либо на основе шаблона.

Проверка Использование ngModel с Angular

Answer 2

Вам необходимо объявить функцию в app.component.ts, также она не должна принимать никаких параметров, как вы определили в HTML

takeUserStr() {
    this.userWord = (<HTMLInputElement>event.target).value;
}