Angular 4 - Componentes

A maior parte do desenvolvimento com o Angular 4 é feita nos componentes. 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 do aplicativo 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 arquivo app.module.ts , ele possui algumas bibliotecas importadas e também um declarativo ao qual é atribuído o componente app da seguinte maneira -

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, angular-cli possui um comando para criar seu próprio componente. No entanto, o componente do aplicativo criado por padrão sempre permanecerá o pai e os próximos componentes criados formarão os componentes filhos.

Vamos agora executar o comando para criar o componente.

ng g component new-cmp

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

C:\projectA4\ Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

Agora, se formos verificar a estrutura do arquivo, obteremos a nova pasta new-cmp criada sob a 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 - isso pode ser usado para testes 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 maneira -

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 arquivo new-cmp.component.ts é gerado da seguinte maneira -

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 cria uma nova classe chamada NewCmpComponent, que implementa OnInit.In, que possui um construtor e um método chamado ngOnInit (). ngOnInit é chamado por padrão quando a classe é executada.

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

Quando atingimos o URL no http: // localhost: 4200 / browser, ele primeiro executa o arquivo index.html que é mostrado abaixo -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title> Angular 4App</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 etiqueta na seção do corpo.

<app-root></app-root>

Essa é a tag raiz criada pelo Angular por padrão. Essa tag tem a referência no arquivo main.ts.

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 auto-inicialização, que carrega o módulo do aplicativo.

Vamos agora ver o arquivo app.module.ts -

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 fornecido, ou seja, a variável para armazenar a referência do aplicativo. Component.ts e o mesmo é dado ao bootstrap. Vamos agora ver o arquivo app.component.ts .

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

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

export class AppComponent {
   title = ' Angular 4 Project!';
}

Angular 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']
})

No declarador, são fornecidas referências ao seletor, templateUrl e styleUrl . 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 possui apenas o código html e o título da variável entre colchetes. Ele é substituído pelo valor presente no arquivo app.component.ts . Isso é chamado de ligação. Discutiremos o conceito de ligação em um capítulo subseqüente.

Agora que criamos um novo componente chamado new-cmp . O mesmo é incluído no arquivo app.module.ts , 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 no 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 também o núcleo. A referência do componente é usada no declarador.

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

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

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

Como 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. Porém, 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 posteriormente.

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

<!--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 a tag <app-new-cmp> </app-new-cmp> é 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 novo arquivo .html do componente e o arquivo new-cmp.component.ts .

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 new component e o valor é " Introduzido no novo componente criado ".

A variável acima é vinculada no arquivo .new-cmp.component.html da seguinte maneira -

<p>
   {{newcomponent}}
</p>

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

Agora, desde que incluímos o seletor <app-new-cmp> </app-new-cmp> no aplicativo. 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 -

Usando a saída do navegador de seletores

Da mesma forma, podemos criar componentes e vincular o mesmo usando o seletor no arquivo app.component.html conforme nossos requisitos.