Angular - routing do innego folderu.

Question

Hej :D

W moim projekcie apki (de facto pierwszej w angularze) stworzyłem coś na wzór "serwisu internetowego" (to de facto sam szkielet HTML + CSS).

W pewnym fragmencie strony ma być opcja przeniesienia pocztę.

Szkielet apki:

Komponenty "header,main,footer" są wywoływane w app komponencie i de dacto stawnowią zawartość html + css po odpaleniu apki.

Jest jeszcze komponent "post", do którego planowałem przełączanie się strony po kliknięciu w odnośnik.

Problem jest taki, że... nic się nie dzieje. :(

Mój kod do routing-u w app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {Routes,RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';
import { PostComponent } from './post/post.component';

const appRoutes: Routes = [
  { path: 'post', component: PostComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    FooterComponent,
    PostComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

W main.component.html (który jest wywoływany w app.component.html) wstawiam w pewnym momencie takie oto hiperłącze:

<a [routerLink]="['/post']">

Nie przęłączyło strony, a w odnośniku pojawiła się tylko taka informacja "http://localhost:4200/post".

Tak jak byłem na html-u app.component.html tak dalej na nim jestem. A efektem zamierzanym było przełączenie strony na localhoście na post.component.html  

P.S Słyszałem, że podobno jest jeszcze wymagane zastosowanie <router-outlet>, ale za bardzo nie wiem czym jest i jako ono działa.

Z góry dziękuję za pomoc i odpowiedzi. :)

Answer 1

P.S Słyszałem, że podobno jest jeszcze wymagane zastosowanie <router-outlet>, ale za bardzo nie wiem czym jest i jako ono działa.

Dawno nie pisałem w Angularze, ale z tego co sobie przypominam z dokumentacji, to Angular musi wiedzieć, gdzie ma pokazać określony widok na podstawie routa - do tego służy dyrektywa <router-outlet>. Powinieneś ją lub je (jeśli masz więcej niż jedną) dodać w miejscu strony, gdzie chcesz aby pokazywały się podstrony w wyniku nawigacji.

Polecam przejrzeć dokumentacje (są przykłady z kodem): https://angular.io/guide/router

W razie jakby coś dalej nie działało, to daj znać czy w konsoli przeglądarki są jakieś błędy.

Comments

Dzięki za odpowiedź.

Tak u mnie wygląda kod w app.component.html

<app-header></app-header>
<router-outlet><app-main></app-main></router-outlet>
<app-footer></app-footer>

A tutaj wywołanie za pomocą tagu a w komponencie "main" w pliku main.component.html:

<main>
      <div class = "square">
        <div class = "element first"><i class="demo-icon icon-mail"></i><br><br><a [routerLink]="['/post']">POCZTA</a></div>
        <div class = "element first"><i class="demo-icon icon-newspaper"></i><br><br>WYDARZENIA</div>
        <div class = "element first"><i class="demo-icon icon-sun"></i><br><br>POGODA</div>
        <div style = "clear:both"></div>
        <div class = "element second"><i class="demo-icon icon-money"></i><br><br>BIZNES</div>
        <div class = "element second"><i class="demo-icon icon-cab"></i><br><br>MOTO</div>
        <div class = "element second"><i class="demo-icon icon-fast-food"></i><br><br>GOTOWANIE</div>
        <div style = "clear:both"></div>
        <div class = "element third"><i class="demo-icon icon-gamepad"></i><br><br>GAMES</div>
        <div class = "element third"><i class="demo-icon icon-chat"></i><br><br>WYWIADY</div>
        <div class = "element third"><i class="demo-icon icon-football"></i><br><br>SPORT</div>
        <div style = "clear:both"></div>
      </div>
</main>

Kluczowa oczywiście jest ta linijka kodu:

<a [routerLink]="['/post']">POCZTA</a>

Tak jak było wciąż jest. Na głównej stronie app nic się nie zmienia, ale pokazuje w linku apki:

http://localhost:4200/post"

Help? :D

P.S Wrzucam jeszcze kod z app.module.ts, ale nie za wiele tutaj zmieniłem i tak:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {Routes,RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';
import { PostComponent } from './post/post.component';

const appRoutes: Routes = [
  { path: 'post', component: PostComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    FooterComponent,
    PostComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes),
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

---

Umieść <router-outlet> wewnątrz <app-main> a nie na odwrót.

---

Tak też wcześniej zrobiłem. Wtedy też tylko "przechodziło" do componentu "post", ale na samej stronie nic a nic się nie działo. Może w jakiś sposób trzeba ustawić, aby dochodziło do załączenia "post.componenet.html"? Dla mnie to wygląda na tą chwilę, jakby apka "weszła" w dany komponent, ale nic a nic się nie zmieniło, bo nic nie zostało wybrane.  :(

---

Czy możesz tę apkę wystawić w formie demo? Np. tutaj: https://stackblitz.com/edit/angular-playground

---

Hej

Sorki, ale miałem problem z przeciągnięciem plików do angular-playground.

Jak coś najważniejsze pliki projektowe mam udostępnione u siebie na githubie:

https://github.com/Hubertius/Angular-First-Project

---

Moje przeoczenie. Umieść <router-outlet> w kodzie HTML komponentu AppMain, czyli nie wewnątrz znacznika <app-main>, ale w jego templatce.

 

---

Działa! :D

Chociaż nie do końca tak jak chciałem. :(

Generalnie w moim założeniu po "routingu"  div o classie "square" w main miał być zastąpiony mini pocztą (szkielet, z listą wyboru opcji i to w sumie tyle).

Gdy dam:

<main>
      <div class = "square">
        <router-outlet></router-outlet>
        <div class = "element first"><i class="demo-icon icon-mail"></i><br><br><a [routerLink]="['/post']">POCZTA</a></div>
        <div class = "element first"><i class="demo-icon icon-newspaper"></i><br><br>WYDARZENIA</div>
        <div class = "element first"><i class="demo-icon icon-sun"></i><br><br>POGODA</div>
        <div style = "clear:both"></div>
        <div class = "element second"><i class="demo-icon icon-money"></i><br><br>BIZNES</div>
        <div class = "element second"><i class="demo-icon icon-cab"></i><br><br>MOTO</div>
        <div class = "element second"><i class="demo-icon icon-fast-food"></i><br><br>GOTOWANIE</div>
        <div style = "clear:both"></div>
        <div class = "element third"><i class="demo-icon icon-gamepad"></i><br><br>GAMES</div>
        <div class = "element third"><i class="demo-icon icon-chat"></i><br><br>WYWIADY</div>
        <div class = "element third"><i class="demo-icon icon-football"></i><br><br>SPORT</div>
        <div style = "clear:both"></div>
      </div>

</main>

Kwadrat na kafelki pośrodku <main> zostanie zastąpiony "post", który tam się będzie wyświetlał. Problem jest taki, że teraz poprzedni kwadrat z kafelkami najzwyczajniej zjechał sobie na dół. Co jeżeli chciałbym, aby po przejściu do poczty i zastąpieniu div-a o klasie square moim contentem z post najzwyczajniej w świecie div nie przesuwał się potem w dół? W sensie żeby go w ogóle nie było?

---

Jeśli div.square ma zniknąć gdy aktywny jest route "/post", to można wrzucić go w jakiś komponent, np. AppHome i dać mu route "/". Wtedy te kafelki będą widoczne na głównej stronie, a na podstronie "/post" będzie poczta.