angular - ngModel 不能在两个不同的组件中工作？

Question

标题是不言自明的，所以 - 我在 app.component.html 文件中放置了一个输入元素，这是代码： <input type="text" name="titleInput" id="titleInput" [(ngModel)]="titleInput"> 然后我尝试在另一个组件中创建一个 h1 元素，因为我希望它显示输入的内容输入字段。没用。在 app.component 中制作了一个 h1 元素 - 工作正常。我搜索了很多，但没有找到任何东西。你能帮助我吗？

Answer 1

您可以使用titleInput通过 操作的模型input，在您的情况下，使用插值在您的标题标签中显示，即{{.}}.

例如：

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

你可以看到它在这里工作。

Answer 2

有两种方法。

要么与@Input. https://angular.io/guide/component-interaction（见其他帖子）。

或LocalStorage.setItem('titleInput', titleInput);在第一个组件中使用。

在第二个LocalStorage.getItem('titleInput');和LocalStorage.removeItem('titleInput');