如何將Angular表達式的值傳遞給組件的屬性？我從API獲取價值。Angular：評估傳遞到組件屬性的表達式

app.controller.js

$http.get(apiUrl).then(function(resp) { 
    $scope.name = resp.data.name; 
}) 
...

person.component.js

export const Person = { 
    templateUrl: 'person.html', 
    bindings: { 
     firstName: '@' 
    }, 
    controller: function() { 
     console.log(this.firstName); 
    } 
}

app.html

... 
<person first-name="name">

對於某些原因，它不在評估name，它在控制檯中記錄undefined。

有沒有辦法解決這個問題，所以它在控制器內記錄了Tom？

任何幫助表示讚賞。提前致謝！

我設置一個的jsfiddle here

來源

2016-06-21 realph

&是表達式，@是插值字符串，所以請嘗試使用

firstName: '&'

然後this.firstName()應該評估傳入的表達。

此外，firstName不保證已被初始化，直到$onInit，所以如果你做

bindings: { 
    firstName: '&' 
}, 
controller: function() { 
    this.$onInit = function() { 
     console.log(this.firstName()); 
    } 
}

你應該得到預期的結果。

參考：https://docs.angularjs.org/guide/component

$onInit() - 的元件上所有的控制器之後的每個控制器上調用已經構造，並其綁定初始化

編輯：

在提供了額外的信息之後，您應該使用單向綁定（<）代替這種情況，因爲它看起來只是傳入單個值（而不是表達式），然後您可以檢測$onChanges的變化。我分出你的jsfiddle來顯示一個潛在的解決方案：http://jsfiddle.net/35xzeo94/。

來源

2016-06-21 13:40:54 CShark

我應該解釋說我從API獲取數據，所以它在加載時不易獲得。我建立了一個jsFiddle [這裏]（http://jsfiddle.net/d2m32gp4/5/） – realph

@realph如果它只是一個變量而不是表達式，那麼你可以使用單向的<<'綁定。在這種情況下，更新值時會調用$ onChanges。但是，如果它確實是一個表達式，那麼您將無法看到更新的值，除非它位於組件視圖中。這是因爲組件並不是以這種方式輸入的，它們應該是'@'或'<'，輸出應該是'＆'的意思。另外，在你的jsfiddle中，你有'name =「customerId」'而不是'name =「name」'。 – CShark

@realph我在我的答案中分出了你的jsfiddle，以顯示一種方法來做到這一點。 – CShark

Angular：評估傳遞到組件屬性的表達式

回答

編輯：

相關問題