Se você estiver criando um aplicativo Angular com várias páginas, precisará usar o roteamento para navegar entre elas. Você pode fazer isso criando uma lista de rotas com um caminho para cada página no módulo de roteamento.
Você pode então rotear para outras páginas dentro de um arquivo HTML usando uma marca de âncora. Você também pode rotear para outras páginas dentro de um arquivo TypeScript, usando o método router.navigate().
Como criar uma nova página em um aplicativo angular
Primeiro, crie um novo aplicativo Angular. Você também pode usar um já existente. Se você não estiver familiarizado com como criar um novo aplicativo Angular, poderá aprender sobre ele junto com outros conceitos introdutórios usados em Angular.
-
Crie um novo componente em seu aplicativo Angular usando o ng gerar componente comando:
ng gerar componente home - Abra o src/app/home/home.component.html arquivo e substitua o conteúdo atual pelo novo conteúdo.
<classe div="contente">
<h2> Casa </h2>
<p>
Eu sou um fotógrafo que faz fotografia de casamento. Confira meus projetos!
</p>
<classe div="cartão">
<h4> John & Amy </h4>
<p> Montanhas Azuis, Austrália </p>
</div>
<classe div="cartão">
<h4> Ross & Rach </h4>
<p> Hunter Valley Gardens, Austrália </p>
</div>
</div> - Preencha o src/app/home/home.component.css arquivo com estilo para o conteúdo HTML.
.contente {
altura da linha: 2rem;
tamanho da fonte: 1.2em;
}.cartão {
Sombra da caixa: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
largura: 400px;
preenchimento: 16px;
margem: 24px 0px;
cor de fundo: fumaça branca;
família de fontes: sem serifa;
} - Crie outro componente usando o ng gerar componente comando no terminal. Você usará o novo componente como uma página sobre.
ng gerar componente sobre - Abra o src/app/about/about.component.html arquivo e substitua o conteúdo atual pelo novo conteúdo.
<classe div="contente">
<h2> Sobre mim </h2>
<p>
EU'm John, e adoro tirar fotos. Faço fotos há mais de 25 anos. Visite-me nas minhas redes sociais:
</p>
<a href=""> Facebook </uma><br>
<a href=""> LinkedIn </uma><br>
<a href=""> Instagram </uma><br>
</div> - Preencha o src/app/about/about.component.css arquivo com estilo para o conteúdo HTML.
.contente {
altura da linha: 2rem;
tamanho da fonte: 1.2em;
}
Como navegar entre as duas páginas
Você pode usar o roteamento para navegar de uma página para outra. Você pode configurar isso em um arquivo de roteamento. Este exemplo terá um arquivo de roteamento para todo o aplicativo, localizado em src/app/app-routing.module.ts.
- Se seu aplicativo ainda não tiver o arquivo de módulo de roteamento de aplicativo, você poderá gerar um usando o ng gerar módulo comando. Em uma linha de comando ou terminal, navegue até a pasta raiz do aplicativo e execute o seguinte comando:
ng gerar módulo app-routing --module app --flat - Isso criará um arquivo app-routing.module.ts em seu src/aplicativo pasta.
- Na parte superior do arquivo, adicione importações adicionais para os componentes Home e About. Certifique-se de importar também RouterModule e CommonModule; em última análise, suas instruções de importação devem se parecer com:
importar { Módulo Comum } a partir de '@angular/comum';
importar { Rotas, RouterModule } a partir de '@angular/roteador';
importar { HomeComponent } a partir de './home/home.component';
importar { Sobre o componente } a partir de './about/about.component'; - Abaixo das importações, adicione uma nova matriz de rotas para armazenar os caminhos que você usará ao rotear para cada página.
const rotas: Rotas = [
{ caminho: '', componente: HomeComponent },
{ caminho: 'cerca de', componente: SobreComponente }
]; - Substitua o bloco NgModule pelo seguinte, que adiciona o RouterModule à matriz de importações e exportações.
@NgModule({
declarações: [],
importações: [
Módulo Comum,
RouterModule.forRoot (rotas)
],
exportações: [RouterModule]
}) - No src/app/app.component.html arquivo, remova o conteúdo atual e adicione a etiqueta de saída do roteador.
<classe div="recipiente">
<saída do roteador></router-outlet>
</div>
Como navegar para a nova página em um arquivo HTML
Para navegar para uma página dentro de um arquivo HTML, use a marca âncora. No atributo href, adicione o caminho que você especificou na matriz de rotas.
- No src/app/app.component.html arquivo, adicione duas tags âncora antes da div do contêiner. Isso permitirá que você navegue entre as páginas Home e About.
<classe div="barra de navegação">
<uma classe ="link" href="">Casa</uma>
<uma classe ="link" href="/about">Sobre</uma>
</div> - Adicione um pouco de estilo ao src/app/app.component.css Arquivo.
.recipiente {
margem: 48px 35%;
família de fontes: &citação;Arial&citação;, sem serifa;
exibição: flexionar;
direção flexível: coluna;
itens de alinhamento: Centro;
}.navbar {
cor de fundo: cinza ardósia;
preenchimento: 30px 50px;
exibição: flexionar;
itens de alinhamento: Centro;
família de fontes: sem serifa;
}.link:primeiro do tipo {
margem direita: 32px;
}.link {
cor: branco;
decoração de texto: Nenhum;
tamanho da fonte: 14pt;
espessura da fonte: negrito;
} - Adicione algum estilo à margem geral da página em src/styles.css.
corpo {
margem: 0;
preenchimento: 0;
} - Em um prompt de comando ou terminal, navegue até a pasta raiz do aplicativo Angular. Execute o aplicativo usando o ng servir comando e espere que ele termine de compilar.
ng servir - Em um navegador, digite localhostURL na barra de URL para visualizar seu aplicativo. Por padrão, isso geralmente é http://localhost: 4200/.
- Seu site será carregado na página inicial.
- Você pode navegar para a página Sobre clicando no link Sobre na barra de navegação.
Como navegar para a nova página em um arquivo TypeScript
Até agora, esta demonstração usa links HTML padrão para fornecer navegação. Para navegar usando o arquivo TypeScript em vez do arquivo HTML, você pode usar roteador.navegar().
- No src/app/app.component.html arquivo, remova as tags de âncora e substitua-as por tags de botão. Esses botões terão um evento click que aciona uma função chamada clickButton(). Ao chamar a função clickButton(), adicione o caminho da rota de URL como um argumento.
<classe de botão ="link" (clique)="cliqueBotão('')">Casa</button>
<classe de botão ="link" (clique)="cliqueBotão('/about')">Sobre</button> - Adicione algum estilo aos botões no src/app/app.component.css Arquivo.
botão {
cor de fundo: Preto;
preenchimento: 4px 8px;
cursor: ponteiro;
} - No topo do src/app/app.component.ts arquivo, importe o roteador.
importar { Roteador } a partir de '@angular/roteador'; - Adicione um novo construtor dentro da classe AppComponent e injete o roteador dentro dos parâmetros.
construtor(roteador privado: Roteador) {
} - Abaixo do construtor, crie uma nova função chamada clickButton(), que navegará para a nova página com base na URL que você passar.
clickButton (caminho: string) {
isto.router.navigate([caminho]);
} - Execute novamente o comando ng serve no prompt de comando ou no terminal.
ng servir - Navegue até seu site em um navegador. O href agora é substituído por dois botões.
- Clique no Sobre botão. Ele será direcionado para a página Sobre.
Criando várias páginas em um aplicativo angular
Você pode rotear entre várias páginas em um aplicativo Angular usando roteamento. Se você tiver componentes separados para cada página, poderá configurar caminhos para suas rotas no módulo de roteamento.
Para navegar para outra página por meio de um arquivo HTML, use uma marca âncora com o atributo href como o caminho de roteamento para essa página. Para navegar para outra página por meio de um arquivo TypeScript, você pode usar o método router.navigate().
Se você estiver criando um aplicativo Angular, poderá utilizar as diretivas Angular. Eles permitem que você use instruções if dinâmicas, loops for ou outras operações lógicas dentro do arquivo HTML de um componente.