草庐IT

javascript - 将 host 属性添加到生成的 DOM 元素

coder 2025-01-16 原文

我正在尝试集成 d3 和 angular2 alpha.37(从 here 开始)。我目前遇到的问题是生成的 DOM 元素没有获得在模拟样式 View 封装中使用的属性，因此如果不将元素的 View 封装设置为 None(或 native ，但我无法设置它们的样式宁愿使用模拟)。

我设法以编程方式从组件 [1] 内的元素中提取所需的属性，然后将其添加到生成的元素中 [2]，这确实有效，但这显然是令人难以置信的 hacky:

import {Component, View, Attribute, ElementRef, LifecycleEvent} from 'angular2/angular2';

import d3 from 'd3';

@Component({
  selector:   'bar-graph',
  properties: [ 'data' ]
})
@View({
  template: '<div class="chart"></div>',
  styles: [`.chart {
    background: #eee;
    padding: 3px;
  }

  div.bar {
    width: 0;
    transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
  }

  div.bar {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 5px;
    color: white;
    box-shadow: 2px 2px 2px #666;
  }`]
})
export class BarGraph implements LifecycleEvent.OnChanges {
  data: Array<number>;
  divs: any;
  constructor(elementRef: ElementRef, @Attribute('width') width: string, @Attribute('height') height: string) {


    var el:any    = elementRef.nativeElement;
    var graph:any = d3.select(el);

    this.hostAttr = graph[0][0].children[0].attributes[1].name; //hack here [1]

    this.divs = graph.
      select('div.chart').
      style({
        'width':  width  + 'px',
        'height': height + 'px',
      }).
      selectAll('div.bar');

  }

  render(newValue) {
    if (!newValue) return;

    this.divs.data(newValue)
        .enter().append('div')
          .classed('bar', true)
          .attr(this.hostAttr, true) //add the attribute here [2]
          .style('width', d => d + '%')
          .text(d => d + '%');

  }

  onChanges() {
    this.render(this.data);
  }

}

是否有推荐的方法来处理这类事情(或者我应该停止在 Angular2 之外修补 DOM)？

最佳答案

(目前)还不是一个完整的答案，但也许有一些有用的信息可以帮助找到解决方案:

  • 该问题在 beta.8 中仍然存在。将 View 封装设置为 None 并使用全局样式是我可以开始工作的唯一解决方案。使用 Native 似乎根本没有向 DOM 添加任何元素，但我必须进行更多测试才能找出原因。
  • OP 提出的 hack 可行，并且可以重构为合理的解决方案，至少在我看来是这样。
  • 在 d3.js 的特定情况下，引入由库内部创建的元素时，事情会变得更加棘手，例如通过 d3.svg 命名空间中的方法。毫无疑问，也可以找到解决方法。
  • 不过，我相信这个问题比 d3 更大。有很多库都有自己的 DOM 生成/操作机制，认为其中一部分会在某个时候集成到某些或其他 angular2 应用程序中并非不切实际。从这个意义上说，令人惊讶的是，这个问题似乎还没有出现(或者这周我的谷歌能力特别弱)。

就解决方案而言，这是我目前正在考虑的两种方法，以防万一没有人想出更好的方法:

  1. 实现某种遍历部分 DOM 树并设置样式范围属性的后处理器。也许作为指令？
  2. 按照提示尝试装饰渲染器 here .

关于javascript - 将 host 属性添加到生成的 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32949791/

javascripthost39codesectiond3.jsangular

有关javascript - 将 host 属性添加到生成的 DOM 元素的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  3. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  4. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  5. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  6. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  7. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  8. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  9. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  10. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

随机推荐