Question

这是我的一个组件的SVG（将是另一个svg的孩子）：

<svg *ngIf="complete" [attr.width]="width" [attr.height]="height" viewBox="0 0 180 100" version="1.1" xml:space="preserve" style="overflow:visible;stroke-linejoin:round;stroke-miterlimit:1.41421;"> ...</svg>

使用*ngIf将SVG添加到组件模板时出错：

未处理的Promise拒绝：模板解析错误：无法绑定＆＃39; ngIf＆＃39;因为它不是＆＃39; svg：svg＆＃39;的已知属性。

除了*ngIf

之外，

svg可以在代码的其他部分正常工作

Height和Width属性绑定工作正常。

我检查了ngIf拼写和模型属性。我测试了添加BrowserModule，没有任何区别。我CommonModule导入了@NgModule。

具有SVG的组件由componentFactory生成。

我有Angular 2 Universal（最新版本）

Answer 1

使用Angular和SVG设置动态绑定需要在属性之前添加attr前缀。

因为* ngIf是[ngIf]的合成糖，我通过写出ngIf和ng-template来解决错误信息：

<ng-template [ngIf]="!label.hasCompensation">
        <svg:text text-anchor="middle" [attr.x]="label.x" [attr.y]="label.y">
                {{label.encoder}} |
                <tspan style="fill:red">{{label.compensation}}</tspan>
        </svg:text>
</ng-template>

主要原因是SVG DOM通常不像HTML DOM那样公开属性。

作为参考，Tero Parviainen撰写了一篇优秀的post on his blog.

Answer 2

正如Günter所写，请确保您的CommonModule可用于包含svg的模块

这是一个工作的plunkr https://plnkr.co/edit/XgU2Ns?p=preview

public class SerializationTest {

    public static void main(String[] args) {
        ConnectionFactory INSTANCE = ConnectionFactory.getIntance();

        try {
            ObjectOutputStream oos = new ObjectOutputStream(new FileOutputStream("connectFactory.ser"));
            oos.writeObject(INSTANCE);
            oos.close();

            ObjectInputStream osi = new ObjectInputStream(new FileInputStream("connectFactory.ser"));
            ConnectionFactory factory1 = (ConnectionFactory) osi.readObject();
            osi.close();

            ObjectInputStream osi2 = new ObjectInputStream(new FileInputStream("connectFactory.ser"));
            ConnectionFactory factory2 = (ConnectionFactory) osi2.readObject();
            osi2.close();


            System.out.println("Instance reference check->" + factory1.getIntance());
            System.out.println("Instance reference check->" + factory2.getIntance());
            System.out.println("===================================================");
            System.out.println("Object reference check->" + factory1);
            System.out.println("Object reference check->" + factory2);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

    }

}

Answer 3

您可以使用[ngClass]代替* ngIf

在您的HTML中：

<app-trend-chart [data]="trendData"
 [ngClass]="loading.charts.isLoading? 'chartVisible': 'chartNotVisible'">
</app-trend-chart>

在您的CSS中：

.chartNotVisible {
    display: none;
}

.chartVisible {
    display: block;
}

Angular 2：向SVG添加* ngIf会引发错误

3 个答案: