Angular2：如何在svg中添加/更改css样式？

Question

我有以下代码将svg添加到angular2组件的模板：

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo
</object>

为了动态添加css样式，我尝试了几种获取内容的方法：

1)

public ngAfterViewInit(): void {
        this.el = this._doc.getElementsByTagName('svg');
        console.log(this.el);
    }

导致控制台：[]

2)

public ngAfterViewInit(): void {
  this.el = this._elementRef.nativeElement.querySelector('object');
  console.log(this.el);
}

导致控制台：null

题：

任何人都可以帮助我如何访问svg以及如何在打字稿中更改css样式？

Answer 1

你可以直接在你的代码中插入qazxsw poi

HTML：

svg

CSS：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <g>
    <path id="myId" d="..."/>
  </g>
</svg>

typescript：你可以使用Jquery

#myId {
  fill: red;
}

编辑：

如下所述，您也可以使用

import $ from 'jquery';

this.el = $("#myId");

而不使用import jquery

Answer 2

这个问题目前缺乏重要的细节，但它看起来像另一个document.getElementById("myId")。你在Angular模板中：不使用DOM方法获取元素并更改其样式，使用模板系统和属性绑定。

由于我不知道您想要具体添加什么CSS，以下是一些通用示例：

Option 1

使用XY Problem绑定更改单个类。

模板：

[ngClass]

零件：

<object type="image/svg+xml"
        data="kiwi.svg"
        [ngClass]="kiwiClass">
  Kiwi Logo
</object>

Option 2

使用

// Reassign this as needed
kiwiClass = "logo";

来调解（相对较小的）类列表的状态

模板：

[ngClass]

然后在样式表中，将所需的样式添加到

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}">
  Kiwi Logo
</object>

和.red类，以及.blue和shouldBeRed条件。

shouldBeBluees是根据评估为布尔值的任何东西分配的，因此它们也可以是函数。

Option 3

使用[ngClass]来调解（相对较小的）类列表的状态

模板：

[class.className]

分配您的样式和条件与选项2相同。

这是一篇关于

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [class.red]="shouldBeRed"
        [class.blue]="checkShouldBeBlue()">
  Kiwi Logo
</object>

的有趣文件。