Angular component is rendered several at a time, but was only asked to do this once

Asked

Viewed 107 times

-3

I’m starting at the angle and I’m having a little problem. I was following a tutorial, and in it I was building a very simple angular application. In it we have basically 3 components, the app-root(main), app-server and app-Servers.

In that I built the app-server html, I did practically nothing in . ts, it’s practically in the pattern of when you create a component, only it looks weird:

Imagem mostrando a renderização indevida
Click on the image to view it in its original size

My app-server is rendered endlessly and I only referenced it once in the app-Components.

If anyone has any doubts like I did, follow my code.

Sever.component.html:

<html>

<head>
    <title>title</title>
</head>

<body>
    <h3>asd.</h3>
</body>

</html>

server.componentts.:

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

@Component({
            selector: 'app-server',
            templateUrl: './server.component.html'

})



export class ServerComponent {



}

app.component.html:

<h3>I'm in the AppComponent</h3>


<hr>


<hr>
<app-servers></app-servers>

app.componentts.:

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

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

app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';


@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Servers.component.ts:

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

@Component({
  selector: 'app-servers',
  template: `<app-server></app-server><app-servers><app-server>`,
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Could someone tell me why this is happening?? Where did I go wrong? I have reviewed the code at some times and it seems all right.

  • because it has an html and body tag in its component?

  • because, as far as I know, this is how html Docs are structured. html tag to indicate that you have selected an html and body doc to configure the visible components. But, I did a test and took them, it seems that there is no need to use these Tacs at the angle, without them it renders the same way.

  • this information is in index.hmtl, in its component leaves only the html referring to it

  • I debugged here, and found the problem in Servers.component.ts: template:<app-server></app-server><app-servers><app-server>. I don’t know why , but this code is generating an infinite loop].

  • Why are you doing this?

  • I didn’t do it on purpose, it was probably a typo. I had written this code some time ago and I came back in it today because I went back to the course, so I was very confused because there was that paraphernalia happening.

Show 1 more comment

2 answers

0


You put <app-servers>, which is the component selector ServersComponent, within your own template. This creates an infinite recursion, because every time app-servers is rendered, it ends up creating a new instance of itself, which then create another instance and so on.

The correct template in this case would be this:

template: `<app-server></app-server>`,

This template will only print the content of the component ServerComponent once.

  • excellent explanation makes perfect sense. Now I got bored of the problem. Thank you.

-1

I don’t quite understand what you’re trying to do, but try to change

template: <app-server></app-server><app-servers><app-server>

for

template: <app-server></app-server><app-servers></app-server>

or

template: <app-server></app-server>

  • I was just following a tutorial of a udemy course, to start at angular. You know explain the pq was happening the loop?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.