Um componente é um dos blocos de construção mais importantes de um aplicativo Angular. Componentes são bits reutilizáveis de código que compõem determinadas seções do seu site.
Exemplos de componentes que você pode criar incluem elementos de interface do usuário menores, como botões ou cartões. Eles também podem incluir elementos de interface do usuário maiores, como barras laterais, barras de navegação ou páginas inteiras.
Usando componentes em Angular
Ao criar componentes em um aplicativo Angular, você pode usá-los em outros componentes. Por exemplo, você pode criar um componente para um grande elemento de cartão de interface do usuário. Você pode usar esse componente como uma tag HTML normal, em qualquer lugar que desejar:
<app-novo-componente></app-new-component>Como os componentes são bits de código reutilizáveis, você também pode passar variáveis para que os dados de cada instância sejam diferentes. Você também pode criar componentes para páginas e roteá-los adequadamente usando o app-routing.module.ts Arquivo.
Você pode projetar seus componentes com base na estrutura de seu aplicativo e em quanto deseja separar sua funcionalidade.
Como criar um componente
Você pode usar o nggerar comando para criar um novo componente.
- Crie um novo Aplicação angular usando ng novo ou abra um existente.
- Abra o prompt de comando ou terminal. Como alternativa, se você tiver seu aplicativo Angular aberto em um IDE como o Visual Studio Code, você pode usar o terminal integrado.
- No terminal, navegue até o local da pasta raiz do projeto. Por exemplo:
cd C:\Users\Sharl\Desktop\Angular-Application - Execute o ng gerar componente comando, seguido pelo nome do novo componente:
ng gerar componente ui-card - O novo componente será criado em uma nova pasta, dentro do src/aplicativo diretório.
Como adicionar conteúdo ao componente angular
O Angular cria cada componente com um arquivo HTML, CSS, TypeScript e Testing Specification.
- o arquivo HTML armazena o conteúdo HTML do componente.
- o arquivo CSS armazena o estilo do componente.
- o Arquivo de especificação de teste (spec.ts) armazena quaisquer testes de unidade para o componente.
- o arquivo TypeScript armazena a lógica e a funcionalidade que define o componente.
Adicione algum conteúdo ao componente de cartão de interface do usuário personalizado.
- Abrir src/app/ui-card/ui-card.component.html, e atualize o HTML do componente. Certifique-se de ter uma imagem usando o mesmo nome em uma pasta chamada src/ativos/imagens em seu aplicativo Angular. Substitua o conteúdo de ui-card.component.html com o seguinte:
<classe div="cartão">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<classe div="recipiente">
<h4 classe ="título"> Montanhas Azuis </h4>
<p> NSW, Austrália </p>
</div>
</div> - Abrir ui-card.component.csse adicione conteúdo CSS ao componente:
.cartão {
Sombra da caixa: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
largura: 400px;
preenchimento: 8px;
margem: 24px;
cor de fundo: fumaça branca;
família de fontes: sem serifa;
}.cartãoimagem {
largura máxima: 400px;
}.título {
acolchoamento: 16px;
}.recipiente {
preenchimento: 2px 16px;
} - o ui-card.component.ts arquivo já contém uma classe para o novo componente onde você pode adicionar novas funções, lógica e funcionalidade. Deve ficar assim:
exportarclasse Componente UiCard implementa OnInit {
construtor() { }
ngOnInit(): vazio {
// Adicione alguma lógica de código aqui
}
// Ou adicione sua lógica e funcionalidade em novas funções
}
Como usar o componente no HTML de outro componente
Lado de dentro ui-card.component.ts, há três atributos: seletor, templateUrl e styleUrl. O templateUrl refere-se ao HTML do componente (e, portanto, links para o arquivo HTML). O atributo styleUrls refere-se ao CSS do componente e links para o arquivo CSS.
@Componente({
seletor: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Ao usar o componente UI Card em outro componente, você usará o nome do seletor "app-ui-card".
- Primeiro, adicione algum conteúdo à sua página da web. Abrir src/app/app.component.html e adicione uma barra de navegação:
<classe div="cabeçalho da barra de navegação">
<uma classe ="título de navegação"><b> Barra de navegação da Web </b></uma>
</div> - Adicione algum estilo à sua barra de navegação em src/app/app.component.css:
.navbar-header {
cor de fundo: #07393C;
preenchimento: 30px 50px;
exibição: flexionar;
itens de alinhamento: Centro;
família de fontes: sem serifa;
}.nav-title {
decoração de texto: Nenhum;
cor: branco;
tamanho da fonte: 16pt;
} - Abaixo da barra de navegação em app.component.html, adicione um novo cartão de interface do usuário. Use o nome do seletor "app-ui-card" como uma tag HTML:
<app-ui-card></app-ui-card> - Você também pode reutilizar o componente incluindo a tag várias vezes. Para fazer isso, substitua a linha acima para usar várias tags HTML app-ui-card:
<estilo div="exibição: flexível">
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
</div> - Execute seu aplicativo Angular a partir do terminal usando o ng servir comando e abra seu site em um navegador da web.
Como passar parâmetros de entrada para o componente
Como o componente é reutilizável, há atributos que você pode querer alterar toda vez que o usar. Nesse caso, você pode usar parâmetros de entrada.
- Adicionar Entrada para a lista de importações no topo ui-card.component.ts:
importar { Componente, Entrada, OnInit } a partir de '@angular/core'; - Em seguida, adicione duas variáveis de entrada dentro do UICardComponent classe. Isso permitirá que você altere o nome do local e a imagem exibida no cartão. Preencha o ngOnInit função como mostrado, para construir o caminho para a imagem ou usar um valor padrão:
exportarclasse Componente UiCard implementa OnInit {
@Entrada() localizaçãoNome: corda;
@Entrada() nome da imagem: corda;construtor() { }
ngOnInit(): vazio {
E se (isto.imagemNome) {
isto.imageName = "./assets/images/" + isto.imagemNome;
} senão {
isto.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Dentro ui-card.component.html, altere o valor "Montanhas Azuis" do Título 4 codificado para usar a variável de entrada "locationName" em vez disso. Altere também o código rígido src atributo na tag de imagem para usar a variável de entrada "imageName":
<classe div="cartão">
<img src="{{imageName}}" alt="Avatar">
<classe div="recipiente">
<h4 classe ="título">{{localNome? nome do local: 'Montanhas Azuis'}}</h4>
<p>NSW, Austrália</p>
</div>
</div> - Dentro app.component.html, modifique as tags "app-ui-card" para incluir as entradas "locationName" e "imageName". Para cada elemento da placa de interface do usuário, insira um valor diferente. Certifique-se de que os arquivos de imagem existam na pasta assets/images do seu aplicativo Angular.
<estilo div="exibição: flexível">
<app-ui-card [locationName]="'Montanhas Azuis'" [nomedaimagem]="'montanhas azuis.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sidney'" [nomedaimagem]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [nomedaimagem]="'newcastle.jpg'"></app-ui-card>
</div> - Execute seu aplicativo Angular a partir do terminal usando o ng servir comando e abra seu site em um navegador da web.
Você pode ver um erro neste momento sobre essas propriedades não terem inicializador. Se sim, basta adicionar ou definir "strictPropertyInitialization": false na tua tsconfig.json.
Como rotear para um novo componente
Se o seu componente estiver representando uma grande parte do seu site, como uma nova página, você também poderá rotear para esse componente.
- Abrir app-routing.module.ts. Importe o UI Card Component na parte superior do arquivo:
importar { Componente UiCard } a partir de './ui-card/ui-card.component'; - Adicione um caminho de roteamento à matriz de rotas:
const rotas: Rotas = [
//... Quaisquer outras rotas que você possa precisar ...
{ caminho: 'uicard', componente: UiCardComponent },
] - Substitua todo o conteúdo atual em app.component.html para incluir apenas a barra de navegação e uma tag HTML de saída do roteador. A saída do roteador permite rotear entre as páginas. Adicione um hiperlink à barra de navegação, com o atributo href correspondendo ao caminho na matriz de rotas:
<classe div="cabeçalho da barra de navegação">
<uma classe ="título de navegação"><b> Barra de navegação da Web </b></uma>
<uma classe ="nav-a-link" href="/uicard"><b> Cartão de IU </b></uma>
</div>
<saída do roteador></router-outlet> - Adicione um pouco de estilo ao novo link do cartão de interface do usuário, em app.component.css:
.nav-a-link {
decoração de texto: Nenhum;
cor: #4b6569;
tamanho da fonte: 14pt;
margem esquerda: 60px;
espessura da fonte: isqueiro;
} - Execute seu aplicativo Angular a partir do terminal usando o ng servir comando e abra seu site em um navegador da web. O link aparecerá na barra de navegação na página da web.
- Anote o endereço de URL em seu navegador da web. Por padrão, geralmente é http://localhost: 4200/. Quando você clicar no link do cartão de interface do usuário, a página será roteada para http://localhost: 4200/uicard, e o cartão de interface do usuário aparecerá.
Criando componentes em Angular
Um componente é um dos principais blocos de construção do Angular. Os componentes permitem que você divida diferentes seções do seu site em partes menores e reutilizáveis. Você pode transformar qualquer coisa em componentes, incluindo botões menores, cartões, barras laterais maiores e barras de navegação.
Você também pode usar variáveis de entrada para passar dados entre diferentes instâncias do componente. E você pode rotear para o componente usando caminhos de URL.
Se você estiver desenvolvendo um novo aplicativo Angular, talvez seja necessário criar uma barra de navegação para que seus usuários naveguem pelos seus componentes. Ter uma barra de navegação responsiva permite visualizá-la em diferentes dispositivos, em diferentes tamanhos de tela.
