Question

我有一个svg，其中我想显示几种形状，例如线，圆等。下面是创建单条线并将其显示在svg中的示例。

在我的AppComponent中，我想遍历形状列表并使用模板显示svg组件，但是什么也没显示。我在做什么错了？

每个组件都应该有自己的模板才能在svg中显示</ p>

在此示例中，形状仅包含LineComponent，也可以是CircleComponent，RectangleComponent等。

我有这个AppComponent

import { Component, ContentChild, TemplateRef } from '@angular/core';

import { LineComponent } from './components/line/line.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'svg-drawing-tool';

    shapes: LineComponent[];
    visible: boolean = true;

    @ContentChild(TemplateRef) shapeTemplate: TemplateRef<any>;

    constructor() {
        console.log('constructor');
        this.shapes = [];
        this.createLines();
    }

    private createLines(): void {
        var l1: LineComponent = new LineComponent();
        this.shapes.push(l1);
        console.log('shapes:', this.shapes);
    }

    onMouseDown(event: MouseEvent): void {
        console.log('mouse down svg');
    }
}

我的html是

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" (mousedown)="onMouseDown($event)">
        <ng-template ngFor let-line [ngForOf]="shapes" [ngForTemplate]="shapeTemplate"></ng-template>
    </svg>
</div>

我的LineComponent是

import { Component, OnInit, ContentChild, TemplateRef } from '@angular/core';

import { Line } from '../../model/shape';

@Component({
    selector: 'app-line',
    templateUrl: './line.component.html',
    styleUrls: ['./line.component.css']
})
export class LineComponent implements OnInit {

    line: Line;

    constructor() {
        console.log('LineComponent constructor');
        this.line = new Line(100, 100, 200, 200);
    }

    ngOnInit() {
        console.log('LineComponent ngOnInit');
    }

}

我的LineComponent模板是（Line是一个类，其中包含线的属性，即起点，终点和颜色）

<ng-template #shapeTemplate>
    <svg:line attr.x1="{{ line.x1 }}" attr.y1="{{ line.y1 }}" attr.x2="{{ line.x2 }}"
        attr.y2="{{ line.y2 }}" style="stroke:#006600; stroke-width:5px" />
</ng-template>

基于类型的动态角度6显示模板

0 个答案: