ngModel不能在兩個不同的組件中工作？

標題是不言而喻的，所以 - 我把一個輸入元素放在app.component.html文件中，這是代碼： <input type="text" name="titleInput" id="titleInput" [(ngModel)]="titleInput"> 然後我嘗試在另一個組件中創建一個h1元素，因爲我希望它顯示輸入字段中輸入的內容。沒有工作。在app.component中製作了一個h1元素 - 效果很好。我搜查了很多，但沒有找到任何東西。你可以幫我嗎？ngModel不能在兩個不同的組件中工作？

來源

2017-08-29 Raptrozz

在你的「其他」組件，您使用的延遲加載？ – brijmcq

那些組件是否有父子關係？ – Rahul

您可以使用您的模型titleInput，通過input來操作，在您的情況下，使用插值在您的標題標籤中顯示，即{{.}}。

例如：

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

你可以看到它的工作here。

來源

2017-08-29 00:48:55 mok

在這個例子中，我可以看到它的工作原理，但它在同一個組件中起作用。我試圖使用字符串插值，但h1元素在另一個組件中，然後它不。 – Raptrozz

有兩種方法。

要麼與子女父母的關係@Input。 https://angular.io/guide/component-interaction（看其他帖子）。

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

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

來源

2017-08-29 06:15:09 Swoox

那麼，我應該在另一個組件的ts文件中輸入「@Input（）titleInput」，對吧？ – Raptrozz

ngModel不能在兩個不同的組件中工作？

回答

相關問題