javascript - How to use multiple instances of same component in Angular 6? - Stack Overflow

admin管理员组

文章数量:1317906

I have created a ponent with selector 'app-circle'. The HTML of the ponent contains an SVG for a circle.

What I want is - to use multiple 'app-circle' in my main HTML to draw multiple circles with different attributes (say, color). But I cannot seem to be able to do this. Basically, my intention was to re-use 'app-circle' as multiple objects.

(Please forgive me for being naive; I am new to angular & web development and my experience is mainly in C#, which might be the reason for me to find difficulty in wrapping around angular/web concepts and way of working)

Here is the code: -

main.html

<div class="diagram-wrapper">
  <app-circle></app-circle>
  <app-circle></app-circle>
</div>

circleponent.html

<svg class="range" height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

circleponent.ts

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

@Component({
            selector: 'app-circle',
            templateUrl: './circleponent.html',
            styleUrls: ['./circleponent.scss']
          })
export class CircleComponent implements OnInit, AfterViewInit {

constructor() { }

ngOnInit() { }

ngAfterViewInit() {
 // Circle logic (fill colors, etc.)
}

I have created a ponent with selector 'app-circle'. The HTML of the ponent contains an SVG for a circle.

What I want is - to use multiple 'app-circle' in my main HTML to draw multiple circles with different attributes (say, color). But I cannot seem to be able to do this. Basically, my intention was to re-use 'app-circle' as multiple objects.

(Please forgive me for being naive; I am new to angular & web development and my experience is mainly in C#, which might be the reason for me to find difficulty in wrapping around angular/web concepts and way of working)

Here is the code: -

main.html

<div class="diagram-wrapper">
  <app-circle></app-circle>
  <app-circle></app-circle>
</div>

circle.ponent.html

<svg class="range" height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

circle.ponent.ts

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

@Component({
            selector: 'app-circle',
            templateUrl: './circle.ponent.html',
            styleUrls: ['./circle.ponent.scss']
          })
export class CircleComponent implements OnInit, AfterViewInit {

constructor() { }

ngOnInit() { }

ngAfterViewInit() {
 // Circle logic (fill colors, etc.)
}

• javascript
• angular

Share Improve this question Follow edited Jul 25, 2018 at 13:20 ilkerkaran 4,36433 gold badges2929 silver badges4444 bronze badges asked Jul 25, 2018 at 12:51 Abhijith.MAbhijith.M 12111 gold badge33 silver badges1212 bronze badges 5

• This should work. Could you reproduce your issue on stackblitz.io ? This would allows us to see what you did wrong – user4676340 Commented Jul 25, 2018 at 12:52
• 2 You need to use @Input() in order to customize your angular ponents. If you don't use @Input() all the instances will look the same – Christian Vincenzo Traina Commented Jul 25, 2018 at 12:53
• Read more here – Christian Vincenzo Traina Commented Jul 25, 2018 at 12:54
• @trichetriche Thanks for replying. Here is the link to stackblitz: - stackblitz./edit/… This works fine. But both the circles have the same color. What I wanted was to have two (or more) circles with different colors (or other attributes). I was thinking to make it like a UI control which I can re-use in different places without affecting each other. – Abhijith.M Commented Jul 25, 2018 at 14:28
• @CristianTraìna Thanks for the suggestion. Will try that. – Abhijith.M Commented Jul 25, 2018 at 14:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Following the suggestion in the ments, I added the @Input to a fork of your stackblitz here: https://stackblitz./edit/angular-jppwhz?file=src%2Fapp%2Fapp.ponent.html

The HTML uses binding to bind the desired color:

<div class="diagram-wrapper">
  <app-circle color='blue'></app-circle>
  <app-circle color='green'></app-circle>
</div>

I hard-coded in the color values, but they could be provided as properties from the associated ponent.

The circle code then looks like this:

import { Component, OnInit, AfterViewInit, Input, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-circle',
  templateUrl: './circle.ponent.html',
  styleUrls: ['./circle.ponent.scss']
})
export class CircleComponent implements OnInit, AfterViewInit {
  @Input() color;
  @ViewChild('circle') circleEle: ElementRef;

  constructor() { }

  ngOnInit() { }

  ngAfterViewInit() {
    // Circle logic (fill colors, etc.)
    console.log(this.circleEle);
    if (this.circleEle) {
      this.circleEle.nativeElement.style.fill = this.color;
    }
  }
}

Hope this helps.

本文标签： javascriptHow to use multiple instances of same component in Angular 6Stack Overflow