ngModel funktioniert nicht in zwei verschiedenen Komponenten?

Question

Der Titel ist ziemlich selbsterklärend, also - ich habe ein Eingabeelement in app.component.html Datei, das ist der Code: <input type="text" name="titleInput" id="titleInput" [(ngModel)]="titleInput"> Dann habe ich versucht, ein H1-Element in einer anderen Komponente, wie ich es wollte angezeigt was im Eingabefeld eingegeben wurde. Hat nicht funktioniert. Hat ein h1-Element in app.component erstellt - funktioniert einwandfrei. Ich habe viel gesucht, aber nichts gefunden. Kannst du mir helfen?

Answer 1

Sie können Ihr Modell titleInput verwendet werden, die durch die input manipuliert wird, Interpolation in Ihrem Fall angezeigt werden, in Ihrem Header-Tag, das heißt {{.}}.

Zum Beispiel:

<div> 
    <h1>{{titleInput}}</h1> 
    <input type="text" name="titleInput" id="titleInput" [(ngModel)]="titleInput"/> 
</div> 

Sie können es sehen here arbeiten.

Answer 2

Es gibt zwei Möglichkeiten.

Entweder tun Sie es mit einer Kind-Eltern-Beziehung mit @Input. https://angular.io/guide/component-interaction (siehe anderen Beitrag).

Oder verwenden Sie LocalStorage.setItem('titleInput', titleInput); in der ersten Komponente.

Und in der zweiten LocalStorage.getItem('titleInput'); und LocalStorage.removeItem('titleInput');