Se stai creando un'applicazione Angular con più pagine, devi utilizzare il routing per navigare tra di esse. Puoi farlo creando un elenco di percorsi con un percorso per ogni pagina nel modulo di routing.
È quindi possibile indirizzare ad altre pagine all'interno di un file HTML utilizzando un tag di ancoraggio. Puoi anche indirizzare ad altre pagine all'interno di un file TypeScript, usando il metodo router.navigate().
Come creare una nuova pagina in un'applicazione angolare
Innanzitutto, crea una nuova applicazione Angular. Puoi anche usarne uno esistente. Se non hai familiarità con come creare una nuova app Angular, puoi conoscerla insieme ad altre concetti introduttivi utilizzati in Angular.
-
Crea un nuovo componente nella tua app Angular usando il ng generare componente comando:
ng generare componente home - Apri il src/app/home/home.component.html file e sostituire il contenuto corrente con il nuovo contenuto.
<classe div="contenuto">
<h2> Casa </h2>
<p>
Sono un fotografo che si occupa di fotografia di matrimonio. Dai un'occhiata ai miei progetti!
</p>
<classe div="carta">
<h4> John & Amy </h4>
<p> Blue Mountains, Australia </p>
</div>
<classe div="carta">
<h4> Ross & Rach </h4>
<p> Giardini di Hunter Valley, Australia </p>
</div>
</div> - Popolare il src/app/home/home.component.css file con uno stile per il contenuto HTML.
.contenuto {
altezza della linea: 2rem;
dimensione del font: 1.2 em;
}.carta {
scatola-ombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
larghezza: 400px;
imbottitura: 16px;
margine: 24px 0px;
colore di sfondo: fumo bianco;
famiglia di font: sans-serif;
} - Crea un altro componente usando il ng generare componente comando nel terminale. Utilizzerai il nuovo componente come pagina di informazioni.
ng generare componente circa - Apri il src/app/about/about.component.html file e sostituire il contenuto corrente con il nuovo contenuto.
<classe div="contenuto">
<h2> Su di me </h2>
<p>
io'm John, e adoro scattare foto. Scatto foto da oltre 25 anni. Venite a trovarmi sui miei social:
</p>
<ahref=""> Facebook </un><fr>
<ahref=""> LinkedIn </un><fr>
<ahref=""> Instagram </un><fr>
</div> - Popolare il src/app/about/about.component.css file con uno stile per il contenuto HTML.
.contenuto {
altezza della linea: 2rem;
dimensione del font: 1.2 em;
}
Come navigare tra le due pagine
Puoi utilizzare il routing per navigare da una pagina all'altra. Puoi configurarlo in un file di routing. Questo esempio avrà un file di routing per l'intera app, situato in src/app/app-routing.module.ts.
- Se la tua app non ha già il file del modulo di instradamento dell'app, puoi generarne uno utilizzando il file ng generare modulo comando. In una riga di comando o in un terminale, accedere alla cartella principale dell'applicazione ed eseguire il comando seguente:
ng generate module app-routing --module app --flat - Questo creerà un file app-routing.module.ts nel tuo sorgente/app cartella.
- Nella parte superiore del file, aggiungi ulteriori importazioni per i componenti Home e Informazioni su. Assicurati di importare anche RouterModule e CommonModule; in definitiva, le tue dichiarazioni di importazione dovrebbero assomigliare a:
importare { CommonModule } da '@angolare/comune';
importare { Percorsi, RouterModule } da '@angolare/router';
importare { HomeComponent } da './home/home.component';
importare { Informazioni sul componente } da './su/su.componente'; - Sotto le importazioni, aggiungi un nuovo array di percorsi per memorizzare i percorsi che utilizzerai durante il routing a ciascuna pagina.
cost percorsi: Itinerari = [
{ sentiero: '', componente: Componente Home},
{ sentiero: 'di', componente: Informazioni sul componente }
]; - Sostituisci il blocco NgModule con il seguente, che aggiunge RouterModule all'array di importazione ed esportazione.
@NgModule({
dichiarazioni: [],
importazioni: [
Modulo Comune,
RouterModule.forRoot (percorsi)
],
esportazioni: [RouterModule]
}) - Nel src/app/app.component.html file, rimuovere il contenuto corrente e aggiungere il tag di uscita del router.
<classe div="contenitore">
<presa del router></router-outlet>
</div>
Come passare alla nuova pagina in un file HTML
Per passare a una pagina all'interno di un file HTML, utilizza il tag anchor. Nell'attributo href, aggiungi il percorso che hai specificato nell'array di route.
- Nel src/app/app.component.html file, aggiungi due tag di ancoraggio prima del contenitore div. Ciò ti consentirà di navigare tra le pagine Home e Informazioni.
<classe div="barra di navigazione">
<una classe="collegamento" href="">Casa</un>
<una classe="collegamento" href="/about">Di</un>
</div> - Aggiungi un po 'di stile al src/app/app.component.css file.
.contenitore {
margine: 48px 35%;
famiglia di font: "Ariale", sans-serif;
Schermo: flettere;
direzione flessibile: colonna;
allineare-oggetti: centro;
}.barra di navigazione {
colore di sfondo: grigio scuro;
imbottitura: 30px 50px;
Schermo: flettere;
allineare-oggetti: centro;
famiglia di font: sans-serif;
}.collegamento:primo del tipo {
margine-destra: 32px;
}.collegamento {
colore: bianca;
decorazione del testo: nessuno;
dimensione del font: 14pt;
peso del carattere: grassetto;
} - Aggiungi un po' di stile al margine generale della pagina src/styles.css.
corpo {
margine: 0;
imbottitura: 0;
} - In un prompt dei comandi o in un terminale, vai alla cartella principale dell'applicazione Angular. Eseguire l'applicazione utilizzando il ng servire comando e attendere che termini la compilazione.
ng servire - In un browser, digita localhostURL nella barra degli URL per visualizzare la tua applicazione. Per impostazione predefinita, questo è di solito http://localhost: 4200/.
- Il tuo sito web verrà caricato nella home page.
- È possibile accedere alla pagina Informazioni facendo clic sul collegamento Informazioni nella barra di navigazione.
Come passare alla nuova pagina in un file TypeScript
Finora, questa demo utilizza collegamenti HTML standard per fornire la navigazione. Per navigare usando il file TypeScript invece del file HTML, puoi usare router.navigate().
- Nel src/app/app.component.html file, rimuovere i tag di ancoraggio e sostituirli con i tag dei pulsanti. Questi pulsanti avranno un evento click che attiva una funzione chiamata clickButton(). Quando chiami la funzione clickButton(), aggiungi il percorso dell'instradamento dell'URL come argomento.
<classe pulsante="collegamento" (clicca)="cliccaPulsante('')">Casa</button>
<classe pulsante="collegamento" (clicca)="cliccaPulsante('/about')">Di</button> - Aggiungi un po 'di stile ai pulsanti nel src/app/app.component.css file.
pulsante {
colore di sfondo: Nero;
imbottitura: 4px 8px;
cursore: puntatore;
} - In cima al src/app/app.component.ts file, importare il router.
importare {Router} da '@angolare/router'; - Aggiungi un nuovo costruttore all'interno della classe AppComponent e inietta il router all'interno dei parametri.
costruttore(router privato: router) {
} - Sotto il costruttore, crea una nuova funzione chiamata clickButton(), che passerà alla nuova pagina in base all'URL che hai passato.
clickButton (percorso: stringa) {
questo.router.navigate([percorso]);
} - Eseguire nuovamente il comando ng serve nel prompt dei comandi o nel terminale.
ng servire - Accedi al tuo sito web con un browser. L'href è ora sostituito da due pulsanti.
- Clicca sul Di pulsante. Verrà indirizzato alla pagina Informazioni.
Creazione di più pagine in un'applicazione angolare
È possibile eseguire il routing tra più pagine all'interno di un'applicazione Angular utilizzando il routing. Se hai componenti separati per ogni pagina, puoi configurare i percorsi per i tuoi percorsi all'interno del modulo di routing.
Per passare a un'altra pagina tramite un file HTML, utilizza un tag di ancoraggio con l'attributo href come percorso di instradamento a quella pagina. Per passare a un'altra pagina tramite un file TypeScript, puoi utilizzare il metodo router.navigate().
Se stai creando un'applicazione Angular, puoi utilizzare le direttive Angular. Questi consentono di utilizzare istruzioni if dinamiche, cicli for o altre operazioni logiche all'interno del file HTML di un componente.
