• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Angular - routing do innego folderu.

0 głosów
543 wizyt
pytanie zadane 4 listopada 2020 w JavaScript przez Hubertius Bywalec (2,970 p.)
zmienione kategorie 4 listopada 2020 przez ScriptyChris

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. :)

1 odpowiedź

0 głosów
odpowiedź 4 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.)
wybrane 6 listopada 2020 przez Hubertius
 
Najlepsza

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.

komentarz 4 listopada 2020 przez Hubertius Bywalec (2,970 p.)

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 { }

 

komentarz 4 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.)

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

komentarz 4 listopada 2020 przez Hubertius Bywalec (2,970 p.)
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.  :(
komentarz 4 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.)
Czy możesz tę apkę wystawić w formie demo? Np. tutaj: https://stackblitz.com/edit/angular-playground
1
komentarz 4 listopada 2020 przez Hubertius Bywalec (2,970 p.)
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
komentarz 4 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.)

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

 

komentarz 4 listopada 2020 przez Hubertius Bywalec (2,970 p.)

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?

1
komentarz 4 listopada 2020 przez ScriptyChris Mędrzec (190,170 p.)

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.

Podobne pytania

+1 głos
1 odpowiedź 327 wizyt
pytanie zadane 14 listopada 2022 w JavaScript przez Bartek030 Obywatel (1,460 p.)
+1 głos
1 odpowiedź 630 wizyt
pytanie zadane 5 kwietnia 2022 w JavaScript przez mm Użytkownik (890 p.)
0 głosów
1 odpowiedź 577 wizyt
pytanie zadane 18 lutego 2018 w JavaScript przez Rafineria Nowicjusz (180 p.)

93,741 zapytań

142,676 odpowiedzi

323,294 komentarzy

63,323 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...