Question

想象一下：

export class MyComponent {

  namespace: string;

  constructor(private globals: Globals) {
    this.namespace = globals.namespace;
  } 
}

然后是这样的模板：

<div class="{{namespace}}-wrapper">
  <h1 class="{{namespace}}-title"></h1>
  <h2 class="{{namespace}}-subtitle"></h2>
</div>

这使您可以完全控制您的样式，因为没有第三方样式（或者非常少，因为没有多少将具有相同的命名空间和后缀）会干扰您自己的样式，但性能呢？让我们说我平均每个模板有20个这样的绑定，是否会影响性能，这会让你考虑不使用这种方法？

从技术上讲，它不应该影响性能，因为它只是一次性绑定，但这样做可能会增加加载时间吗？我还没有找到任何可靠的测试方法，所以我无法确定。

我知道视图封装，但我希望有一种方法可以让我关闭它，但仍然确保没有任何东西会破坏。

是否有更好的方法来实现这一点，或者这是一种非常好的方法？

Answer 1

Angular2中没有一次性绑定。每次更改检测运行时，都会检查此类绑定中使用的属性是否有变化。

Angular2变化检测非常有效，可以使用<% if current_user.wall_notifications.present? %>  <% @wall_notifications.each do |wall_notification|%> <div class="row margin-top"> <div class="col-md-12"> <div class="right-article"> <div class="item-side-article"> <% if wall_notification.attachable_type == 'Picture'%> <% if wall_notification.attachable.pic_upload.file.extension.downcase == 'mp4'%> <video style="float:left;height:102px;margin-right:10px;width:180px;" controls> <source src="<%= wall_notification.attachable.pic_upload.url%>" type="video/mp4"> Your browser does not support the video tag. </video> <% else %> <img src="<%= wall_notification.attachable.pic_upload.url%>"> <% end %> <% end %> <% if wall_notification.attachable_type == 'UserVideo'%> <% if wall_notification.attachable.user_video.present? %> <video style="float:left;height:102px;margin-right:10px;width:180px;" controls> <source src="<%= wall_notification.attachable.user_video.url%>" type="video/mp4"> Your browser does not support the video tag. </video> <% end %> <% end %> <% if wall_notification.attachable_type == 'Career'%> <% if wall_notification.attachable.career_file.present?%> <img src="<%= wall_notification.attachable.career_file.url%>"> <% end %> <% end %> </div> </div> </div> </div> <%end%>  <% end %>进一步优化。

如果每个模板有大约20个绑定，这对于整个应用程序来说可能会变得非常大，我希望这会损害性能。

我没有看到这可能会影响加载时间的原因。

通过组件属性为css类添加动态命名空间对性能/加载有害吗？

1 个答案: