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:
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.
template:<app-server></app-server><app-servers><app-server>
. Não sei pq , mais esse código ta gerando um loop infinito].