方法与管道

时间:2018-01-18 23:38:10

标签: angular performance

在Angular应用程序中使用管道和模板插值方法之间有区别吗?

例如:

CONNAME vs <h1>{{ name.toLowerCase() }}</h1>

就表现而言,是真的有收获还是只是个人偏好?

我知道在模板中调用方法通常会降低性能,因为Angular会不断检查其执行是否发生了任何变化。大多数时候,我在我的组件上使用了计算属性。

2 个答案:

答案 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.