Obraz tylko na pierwszej stronie - Angular

Question

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?

html angular image

-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

Answer 1

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

Answer 2

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

Obraz tylko na pierwszej stronie - Angular

2 odpowiedzi

Podobne pytania

Nowe pytania

html