Jestem całkiem nowy w programowaniu Angular. Mam małą aplikację Angulara. W moim app.component.html mam:

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

Chcę mieć obraz tylko na pierwszej stronie (załadowany na localhost: 4200) w następujący sposób:

Nagłówek
obraz
stopka

Próbowałem ustawić <img src="../../assets/firstpageimage.png" height="500px" width="600px"> w app.component.html, ale potem mam ten obraz na wszystkich moich komponentach. Sytuacja jest absolutnie taka sama z index.html.

Gdzie muszę ustawić tag img, aby być tylko na pierwszej stronie głównej?

-2
littleFox 19 grudzień 2019, 16:22
1
Tak, dane w app.component będą wyświetlane globalnie. Jeśli chcesz to tylko na określonej stronie, musisz dołączyć img do tego, co jest wyświetlane w wylocie routera.
 – 
Rich
19 grudzień 2019, 16:24
Nie podano wystarczających informacji, aby wiarygodnie określić, jaka będzie „pierwsza strona”, ale jest to trasa lub komponent, który jest początkowo wyświetlany w routerze.
 – 
Rich
19 grudzień 2019, 16:24
Dzięki, @Rich! Zaktualizowałem opis.
 – 
littleFox
19 grudzień 2019, 16:33

2 odpowiedzi

Musisz umieścić obraz w komponencie, który odpowiada głównemu adresowi URL (/).

0
B45i 19 grudzień 2019, 16:40
To jest app.component. Z tego powodu img jest pokazywany na całym świecie.
 – 
littleFox
19 grudzień 2019, 17:03
1
Myślę, że nie rozumiesz, jak działa tutaj routing. Kiedy definiujesz swoje trasy ("/", "/home", "/dashboard", "/reports", cokolwiek), zawartość tych tras jest pokazywana przez router-outlet. Jeśli ustawisz domyślną trasę ("/"), która prowadzi do, powiedzmy, jakiegoś komponentu strony głównej, to tam powinieneś umieścić swój obraz. Pomyśl o app.component jako o katalogu głównym aplikacji. Rzeczy w katalogu głównym są pokazywane wszędzie. Niezależnie od tego, na jakiej stronie Twojej aplikacji się znajdujesz, zobaczysz nagłówek i stopkę. Dlatego nie chcesz tam img, ale w komponencie trasy strony głównej.
 – 
Rich
19 grudzień 2019, 17:15
1
Ponieważ nie wiemy, jakie są Twoje definicje tras i definicje komponentów (nie zostały one dostarczone), możemy tylko zgadywać, jaki byłby ten komponent, więc nie można udzielić Ci konkretnej odpowiedzi . Jeśli nie masz zdefiniowanych żadnych tras (wszystko w Twojej aplikacji jest w tym przypadku globalne), to właśnie tam powinieneś poczytać.
 – 
Rich
19 grudzień 2019, 17:17

Znalazłem rozwiązanie!

Mój app.component.html to:

<div class="container-fluid">

  <br/>
  <app-header></app-header>
  <div style="text-align: center;" >
    <img src="../../assets/firstpageimg.png" height="500px" width="600px" *ngIf="(router.url==='/')">
  </div>
  <router-outlet></router-outlet>
  <app-footer></app-footer>


</div>
0
littleFox 19 grudzień 2019, 17:18