Angular 6 - Componentes

A maior parte do desenvolvimento com Angular 6 é feita nos componentes. Os componentes são basicamente classes que interagem com o arquivo .html do componente, que é exibido no navegador. Vimos a estrutura do arquivo em um de nossos capítulos anteriores. A estrutura do arquivo tem o componente app e consiste nos seguintes arquivos -

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

Os arquivos acima foram criados por padrão quando criamos um novo projeto usando o comando angular-cli.

Se você abrir o app.module.ts arquivo, ele tem algumas bibliotecas que são importadas e também um declarativo que é atribuído ao appcomponent da seguinte forma -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

As declarações incluem a variável AppComponent, que já importamos. Este se torna o componente pai.

Agora, o angular-cli tem um comando para criar seu próprio componente. No entanto, o componente do aplicativo que é criado por padrão sempre permanecerá o pai e os próximos componentes criados formarão os componentes filho.

Vamos agora executar o comando para criar o componente.

ng generate component new-cmp

Ao executar o comando acima na linha de comando, você receberá a seguinte saída -

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

Agora, se formos verificar a estrutura do arquivo, obteremos a nova pasta new-cmp criada na pasta src / app.

Os seguintes arquivos são criados na pasta new-cmp -

new-cmp.component.css - o arquivo css para o novo componente é criado.
new-cmp.component.html - o arquivo html é criado.
new-cmp.component.spec.ts - pode ser usado para teste de unidade.
new-cmp.component.ts - aqui, podemos definir o módulo, propriedades, etc.

As alterações são adicionadas ao arquivo app.module.ts da seguinte forma -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

o new-cmp.component.ts arquivo é gerado da seguinte forma -

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Se você vir o arquivo new-cmp.component.ts acima, ele criará uma nova classe chamada NewCmpComponent, que implementa OnInit.In, que tem um construtor e um método chamado ngOnInit (). ngOnInit é chamado por padrão quando a classe é executada.

Vamos verificar como funciona o fluxo. Agora, o componente do aplicativo, que é criado por padrão, torna-se o componente pai. Qualquer componente adicionado posteriormente torna-se o componente filho.

Quando acertamos o url no http://localhost:4200/ navegador, ele primeiro executa o arquivo index.html que é mostrado abaixo -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</title>
      <base href = "/">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

O acima é o arquivo html normal e não vemos nada impresso no navegador. Dê uma olhada na tag na seção do corpo.

<app-root></app-root>

Esta é a tag raiz criada pelo Angular por padrão. Esta tag tem a referência nomain.ts Arquivo.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

O AppModule é importado do aplicativo do módulo pai principal e o mesmo é fornecido ao Módulo de bootstrap, que faz com que o appmodule seja carregado.

Vamos agora ver o app.module.ts arquivo -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Aqui, o AppComponent é o nome dado, ou seja, a variável para armazenar a referência do app. Component.tse o mesmo é dado ao bootstrap. Vamos agora ver oapp.component.ts Arquivo.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

O núcleo angular é importado e referido como o componente e o mesmo é usado no declarador como -

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

Na referência do declarador ao seletor, templateUrl e styleUrlsão dados. O seletor aqui nada mais é do que a tag que é colocada no arquivo index.html que vimos acima.

A classe AppComponent possui uma variável chamada title, que é exibida no navegador.

o @Component usa o templateUrl chamado app.component.html que é o seguinte -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

Ele contém apenas o código html e o título da variável entre chaves. Ele é substituído pelo valor, que está presente noapp.component.tsArquivo. Isso é chamado de vinculação. Discutiremos o conceito de vinculação em um capítulo subsequente.

Agora que criamos um novo componente chamado new-cmp. O mesmo é incluído noapp.module.ts arquivo, quando o comando é executado para criar um novo componente.

app.module.ts tem uma referência ao novo componente criado.

Vamos agora verificar os novos arquivos criados em new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

Aqui, temos que importar o núcleo também. A referência do componente é usada no declarador.

O declarador tem o seletor chamado app-new-cmp e a templateUrl e styleUrl.

O .html chamado new-cmp.component.html é o seguinte -

<p>
   new-cmp works!
</p>

Conforme visto acima, temos o código html, ou seja, a tag p. O arquivo de estilo está vazio, pois não precisamos de nenhum estilo no momento. Mas quando executamos o projeto, não vemos nada relacionado ao novo componente sendo exibido no navegador. Vamos agora adicionar algo e o mesmo pode ser visto no navegador mais tarde.

O seletor, ou seja, app-new-cmp precisa ser adicionado no app.component .html arquivo da seguinte forma -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

Quando o <app-new-cmp></app-new-cmp> tag for adicionada, tudo o que está presente no arquivo .html do novo componente criado será exibido no navegador junto com os dados do componente pai.

Vamos ver o new component .html arquivo e o new-cmp.component.ts Arquivo.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

Na classe, adicionamos uma variável chamada novo componente e o valor é "Entered in new component created"

A variável acima está vinculada ao .new-cmp.component.html arquivo da seguinte forma -

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

Agora, uma vez que incluímos o <app-new-cmp></app-new-cmp> seletor no app. component .html que é o .html do componente pai, o conteúdo presente no novo arquivo .html do componente (new-cmp.component.html) é exibido no navegador da seguinte maneira -

Da mesma forma, podemos criar componentes e vinculá-los usando o seletor no app.component.html arquivo de acordo com nossos requisitos.