在Angular应用程序中使用管道和模板插值方法之间有区别吗?
例如:
CONNAME
vs <h1>{{ name.toLowerCase() }}</h1>
就表现而言,是真的有收获还是只是个人偏好?
我知道在模板中调用方法通常会降低性能,因为Angular会不断检查其执行是否发生了任何变化。大多数时候,我在我的组件上使用了计算属性。
答案 0 :(得分:3)
请阅读documentation关于注意这种被称为&#34;纯&#34;并且&#34;不纯的&#34;管道。这应该解决有关管道性能的问题。
调用这样的函数
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "<?php echo base_url().'Dashboard/chartData'; ?>",
dataType: "JSON",
success:function(result){
google.charts.load('current',{
'packages':['corechart']
});
google.charts.setOnLoadCallback(function(){
drawChart(result);
});
//alert(result);
}
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'defects');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([obj.name, parseInt(obj.defects)]);
});
data.addRows(dataArray);
var piechart_options = {
title : 'Defects Registered',
width : 500,
height: 300,
is3D: true,
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
piechart.draw(data, piechart_options);
}
});
</script>
取决于函数本身。在这个特定的情况下,我认为它与管道相同,但管道专门为此目的而创建。
答案 1 :(得分:3)
TL; DR; 请勿在模板中使用函数或方法,而应使用管道。
仅当输入值更改时,才会调用管道。每次更改检测都会调用一个函数或方法。 Here is a nice article,如果您想进一步了解模板中的功能。
Here is a running stackblitz demonstration of method vs pipe.