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>

您可以看到它正常工作here。

Answer 2

有两种方式。

使用@Input的子父母关系进行。 https://angular.io/guide/component-interaction（见其他帖子）。

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

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