Kui loote mitme leheküljega Angular-rakendust, peate nende vahel navigeerimiseks kasutama marsruutimist. Seda saate teha, luues marsruutide loendi marsruutidega marsruutimismooduli iga lehe jaoks.

Seejärel saate ankurmärgendi abil suunata HTML-faili teistele lehtedele. Saate marsruutida ka teistele TypeScript-faili lehtedele, kasutades meetodit router.navigate().

Kuidas luua nurgarakenduses uut lehte

Esiteks looge uus Angular rakendus. Võite kasutada ka olemasolevat. Kui te pole uue Angulari rakenduse loomisega kursis, saate selle kohta koos teiste rakendustega tutvuda Angularis kasutatavad sissejuhatavad mõisted.

  1. Looge oma Angular rakenduses uus komponent kasutades ng genereerida komponenti käsk:
    ng genereerida komponendi kodu
  2. Ava src/app/home/home.component.html faili ja asendage praegune sisu uue sisuga.
    <div klass="sisu">
    <h2> Kodu </h2>
    <lk>
     Olen fotograaf, kes tegeleb pulmafotograafiaga. Tutvu minu projektidega!
    </lk>
    <div klass="kaardile">
    <h4> John & Amy </h4>
    <lk> Sinimäed, Austraalia </lk
    




instagram viewer

    
>
    </div>
    <div klass="kaardile">
    <h4> Ross & Rach </h4>
    <lk> Hunter Valley Gardens, Austraalia </lk>
    </div>
    </div>
  3. Asustada src/app/home/home.component.css HTML-i sisu stiiliga fail.
    .sisu {
    reakõrgus: 2rem;
    fondi suurus: 1.2em;
    }
    .kaart {
    kast-vari: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    laius: 400px;
    polsterdus: 16px;
    marginaal: 24px 0px;
    taustavärv: valge suits;
    font-perekond: sans-serif;
    }
  4. Looge teine ​​komponent, kasutades ng genereerida komponenti käsk terminalis. Uut komponenti kasutate teabelehena.
    ng genereerida komponent umbes
  5. Ava src/app/about/about.component.html faili ja asendage praegune sisu uue sisuga.
    <div klass="sisu">
    <h2> Minust </h2>
    <lk>
     I'm John ja mulle meeldib pildistada. Olen pildistanud üle 25 aasta. Külastage mind minu sotsiaalmeedias:
    </lk>
    <a href=""> Facebook </a><br>
    <a href=""> LinkedIn </a><br>
    <a href=""> Instagram </a><br>
    </div>
  6. Asustada src/app/about/about.component.css HTML-i sisu stiiliga fail.
    .sisu {
    reakõrgus: 2rem;
    fondi suurus: 1.2em;
    }

Kuidas kahe lehe vahel navigeerida

Saate kasutada marsruutimist ühelt lehelt teisele navigeerimiseks. Saate seda konfigureerida marsruutimisfailis. Selles näites on kogu rakenduse jaoks üks marsruutimisfail, mis asub src/app/app-routing.module.ts.

  1. Kui teie rakendusel pole veel rakenduse marsruutimise mooduli faili, saate selle luua, kasutades ng genereerida moodul käsk. Liikuge käsureal või terminalis rakenduse juurkausta ja käivitage järgmine käsk:
    ng genereerida moodulirakenduse marsruutimine --module app --flat
  2. See loob teie faili app-routing.module.ts src/app kausta.
  3. Faili ülaosas lisage komponentide Kodu ja Teave jaoks täiendavad impordid. Veenduge, et impordite ka RuuterModule ja CommonModule; lõppkokkuvõttes peaksid teie impordiavaldused välja nägema järgmised:
    importida { CommonModule } alates '@nurkne/tavaline';
    importida { Routes, RouterModule } alates '@angular/ruuter';
    importida { HomeComponent } alates './home/home.component';
    importida { AboutComponent } alates './about/about.component';
  4. Lisage importimise alla uus marsruutide massiiv, et salvestada teed, mida kasutate igale lehele marsruutimisel.
    konst marsruudid: Marsruudid = [
     { tee: '', komponent: HomeComponent },
     { tee: 'umbes', komponent: AboutComponent }
    ];
  5. Asendage plokk NgModule järgmisega, mis lisab ruuterimooduli impordi ja ekspordi massiivi.
    @NgModule({
     deklaratsioonid: [],
     import: [
     CommonModule,
     RouterModule.forRoot (marsruudid)
     ],
     ekspordid: [RouterModule]
    })
  6. Aastal src/app/app.component.html faili, eemaldage praegune sisu ja lisage ruuteri väljalaskeava silt.
    <div klass="konteiner">
    <ruuter-väljund></router-outlet>
    </div>

Kuidas navigeerida HTML-failis uuele lehele

HTML-failis lehele navigeerimiseks kasutage ankurmärgendit. Lisage atribuudis href tee, mille määrasite marsruutide massiivi.

  1. Aastal src/app/app.component.html faili, lisage konteineri div ette kaks ankurmärgendit. See võimaldab teil navigeerida avalehe ja Teave lehtede vahel.
    <div klass="navigeerimisriba">
    <klass ="link" href="">Kodu</a>
    <klass ="link" href="/about">Umbes</a>
    </div>
  2. Lisage sellele veidi stiili src/app/app.component.css faili.
    .konteiner {
    marginaal: 48px 35%;
    font-perekond: &tsitaat;Arial&tsitaat;, sans-serif;
    kuva: painduv;
    painduv suund: veerg;
    joondada-üksused: Keskus;
    }
    .navbar {
    taustavärv: tume kiltkivihall;
    polsterdus: 30px 50px;
    kuva: painduv;
    joondada-üksused: Keskus;
    font-perekond: sans-serif;
    }
    

    .link:tüüpi esimene {
    margin-parem: 32px;
    }
    .link {
    värvi: valge;
    tekst-kaunistus: mitte ühtegi;
    fondi suurus: 14pt;
    font-weight: julge;
    }
  3. Lisage lehe üldisele veerisele veidi stiili src/styles.css.
    keha {
    marginaal: 0;
    polsterdus: 0;
    }
  4. Liikuge käsureal või terminalis rakenduse Angular juurkausta. Käivitage rakendus, kasutades teenida käsk ja oodake, kuni see kompileerimise lõpetab.
    teenida
  5. Rakenduse vaatamiseks sisestage brauseris URL-i ribale localhostURL. Vaikimisi on see tavaliselt http://localhost: 4200/.
  6. Teie veebisait laaditakse avalehele.
  7. Saate navigeerida lehele Teave, klõpsates navigeerimisribal lingil Teave.

TypeScript-failis uuele lehele navigeerimine

Seni kasutab see demo navigeerimiseks standardseid HTML-linke. HTML-faili asemel TypeScript-faili abil navigeerimiseks võite kasutada ruuter.navigate().

  1. Aastal src/app/app.component.html faili, eemaldage ankrusildid ja asendage need nuppude siltidega. Nendel nuppudel on klõpsamissündmus, mis käivitab funktsiooni clickButton(). Funktsiooni clickButton() kutsumisel lisage argumendina URL-i marsruudi tee.
    <nupu klass="link" (klõps)="clickButton('')">Kodu</button>
    <nupu klass="link" (klõps)="clickButton('/about')">Umbes</button>
  2. Lisage nuppudele veidi stiili src/app/app.component.css faili.
    nuppu {
    taustavärv: must;
    polsterdus: 4px 8px;
    kursor: osuti;
    }
  3. ülaosas src/app/app.component.ts faili, importige ruuter.
    importida { ruuter } alates '@angular/ruuter';
  4. Lisage AppComponent klassi uus konstruktor ja sisestage ruuter parameetrite piires.
    konstruktor(privaatne ruuter: ruuter) {
    }
  5. Looge konstruktori all uus funktsioon nimega clickButton(), mis navigeerib teie sisestatud URL-i põhjal uuele lehele.
    clickButton (tee: string) {
    see.router.navigate([tee]);
    }
    ​​​​​​
  6. Käivitage käsureal või terminalis käsk ng serve uuesti.
    teenida
  7. Liikuge brauseris oma veebisaidile. Href on nüüd asendatud kahe nupuga.
  8. Klõpsake nuppu Umbes nuppu. See suunatakse lehele Teave.

Mitme lehekülje loomine nurgarakenduses

Marsruutimise abil saate Angular-rakenduses marsruutida mitme lehekülje vahel. Kui teil on iga lehe jaoks eraldi komponendid, saate marsruutimismoodulis oma marsruutide teid konfigureerida.

HTML-faili kaudu teisele lehele navigeerimiseks kasutage selle lehe marsruutimisteena ankrumärgendit atribuudiga href. TypeScript-faili kaudu teisele lehele navigeerimiseks võite kasutada meetodit ruuter.navigate().

Kui loote Angular-rakendust, saate kasutada Angular-direktiive. Need võimaldavad teil kasutada komponendi HTML-failis dünaamilisi if-lauseid, for-loope või muid loogilisi toiminguid.