ngForディレクティブ内のコンポーネントのIDにアクセスする方法は？

Question

これは重複しているとお詫び申し上げますが、私は正しい質問をしているかどうかわからないので、回答を得るのが難しいと思っている。

ngForの一部として少しのsvgバー（複数回）を描きたいと思います。

のは、私が持っている、としましょう

...

list.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-list', 
    template: ` 
     <div *ngFor="let item of items"> 
      <app-svgbar [value]="someNumber"></app-svgbar> 
     </div>` 
}) 

export class ListComponent { 

    items: number[] = [0,1,2,3,4,5,6,7,8,9] 

} 

svgbar.component.ts

import { Component, OnInit, Input } from '@angular/core'; 
import * as SVG from 'svg.js'; 

@Component({ 
    selector: 'app-svgbar', 
    template: `<div id="barID"></div>` 
}) 

export class SvgSingleBarComponent implements OnInit { 

    @Input() value: number; 

    ngOnInit() { 
     this.drawSvg(this.value) 
    } 

    drawSvg(value) { 
     let draw = SVG('barID').size(10, 10) // This is my problem 
     draw.rect(value, 10) 
     .fill('#000') 
    } 
} 

これを実行すると、それが作成されますid="barID"

の最初のインスタンスのすべてのsvg要素

私はこのようなことについて正しい方法を知りません。どんな助けでも大歓迎です。

Plnkr link

Answer 1

あなたの問題は、SVG libの使い方です。

これは働いて、あなたのPlunkerです：https://plnkr.co/edit/lqEdlw0uo7P1bqb8w6sT?p=preview

をあなたはこれを達成するための要素を追跡する必要があり、インデックスはありません。 SVG libの使用方法にnativeElementを追加するだけです。

このコードはトリックを行います。

import { Component, OnInit, Input, NgZone, ElementRef } from '@angular/core'; 
import { id } from "@swimlane/ngx-datatable/release/utils"; 

@Component({ 
    selector: 'app-svg', 
    template: `<div id="bar-{{index}}"></div>`, 
    styles: [] 
}) 
export class SVGComponent implements OnInit { 

    @Input() value: number; 
    @Input() index: number; 

    constructor(public ngZone: NgZone, public elementRef: ElementRef) {} 

    ngOnInit() { 
    this.drawSVG() 
    } 

    drawSVG() { 
    let id = 'bar-' + this.index; 
    // console.log('id: ',id); 
    // console.log('value: ',this.value); 
    this.ngZone.run(() => { 
     console.log(id); 
     let draw = SVG(this.elementRef.nativeElement).size(100, 10) 
     draw.rect(10*this.value,10) 
     .radius(4) 
     .fill('#3db8db') 
    }); 
    } 

} 

NgZoneだけ角度があなたのサードパーティのlibの変化をレンダリングすることを確認することです。

Answer 2

SVGのインデックスの@Input()を渡し、そしてあなたはそれを一意にするためにIDにそれを連結することができます。いずれか、または各SVGコンポーネントのIDのランダムな文字列を生成します。

連結の例：親コンポーネント上

@Component({ 
    selector: 'app-svgbar', 
    template: `<div id="barID-{{index}}"></div>` 
}) 
export class SvgSingleBarComponent implements OnInit { 
    @Input() index: number; 
    @Input() value: number; 

    ngOnInit() { 
     this.drawSvg(this.value) 
    } 

    drawSvg(value) { 
     let draw = SVG('barID-' + this.index).size(10, 10) // This is my problem 
     draw.rect(value, 10) 
     .fill('#000') 
    } 
} 

そして、あなたのループでは、インデックスに渡すようにしてください：

<div *ngFor="let item of items; let i = index"> 
     <app-svgbar [value]="someNumber" [index]="i"></app-svgbar> 
    </div>` 

---

あなたが対処したくない場合インデックスを使用すると、SVGコンポーネントごとにランダムに生成されたIDを設定できます。

@Component({ 
    selector: 'app-svgbar', 
    template: `<div id="{{randomID}}"></div>` 
}) 
export class SvgSingleBarComponent implements OnInit { 
    @Input() value: number; 

    randomID: string = (Math.random() * 1000000000).toString(); 

    ngOnInit() { 
     this.drawSvg(this.value) 
    } 

    drawSvg(value) { 
     let draw = SVG(this.randomID).size(10, 10) // This is my problem 
     draw.rect(value, 10) 
     .fill('#000') 
    } 
} 

EDIT

ここでもIDが必要ない場合もあります。ただElementRefを注入して、それをあなたの一意の要素アクセスに使用してください。

上記を実行すると、エラーは発生しません。私はPlnkrの例を示しますが、埋め込みリンクであったためPlnkrを保存することはできませんでした。