-3

Estou começando no angular e estou tendo um pequeno problema. Estava seguindo um tutorial, e nele estava construindo uma applicação angular bem simples. Nele temos basicamente 3 componentes, o app-root(principal) ,app-server e app-servers.

Nesse eu construi o html do app-server , praticamente não fiz nada no .ts, ele tá praticamente no padrão de quando você cria um componente, só que olha só que estranho:

Imagem mostrando a renderização indevida
Clique na imagem para visualiza-la em seu tamanho original

O meu app-server é renderizado infinitas vezes sendo que eu só referenciei ele uma vez no app-components.

Se alguém tiver dúvida como fiz segue meu código.

Sever.component.html:

<html>

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

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

</html>

server.component.ts:

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.component.ts:

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() {
  }

}

Alguém poderia me dizer porque isso está acontecendo?? Aonde foi que eu errei? Eu revi o código alguma vezes e parece esta tudo certo.

6
  • porque tem uma tag html e body no seu componente? Commented 6/01/2021 às 13:56
  • porque, até onde eu sei, é assim que docs html são estruturados. tag html para indicar que inciou um doc html e body para configurar os componentes visiveis. Mas, Eu fiz um teste e tirei eles, parece que não é preciso usar esses tacs no angular, sem eles ele renderiza da mesma forma. Commented 6/01/2021 às 14:14
  • essa informações ficam no index.hmtl, no seu componente deixa somente o html referente a ele Commented 6/01/2021 às 14:23
  • eu dei uma debugada aqui, e achei o problema ta em servers.component.ts: template:<app-server></app-server><app-servers><app-server>. Não sei pq , mais esse código ta gerando um loop infinito]. Commented 6/01/2021 às 14:25
  • pq vc ta fazendo isso? Commented 6/01/2021 às 16:50

2 Respostas 2

0

Você colocou <app-servers>, que é o selector do componente ServersComponent, dentro do seu próprio template. Isso cria uma recursão infinita, pois toda vez que app-servers for renderizado, ele acaba criando uma nova instância dele mesmo, que em seguida criam mais outra instância e assim por diante.

O template correto neste caso seria esse:

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

Esse template vai apenas imprimir o conteúdo do componente ServerComponent uma única vez.

1
  • excelente explicação faz todo sentido. Agora eu entedi o problema. Obrigado. Commented 9/01/2021 às 13:33
-1

Eu não entendi muito bem o que você esta tentando fazer, mas tente trocar

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

por

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

ou

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

1
  • apenas estava seguindo um tutorial de um curso udemy, para começar no angular. Vc sabe explicar o pq estava acontecendo o loop? Commented 6/01/2021 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .