Как заменить всю страницу в розетке роутера angular 4 routing?

Я хочу заменить все содержимое страницы при щелчке по изображению в angular 4. У меня есть 2 компонента HTML, я хочу перенаправить с одного компонента на другой. Оба компонента имеют разные заголовок и содержимое.

Найдите SS обоих макетов: Макет результата компонента домашней страницы: < img src = "https://i.stack.imgur.com/6Rgc9.png" alt = "введите описание изображения здесь">

Схема результатов компонента Details: введите описание изображения здесь

Я хочу перенаправить из дома на подробную информацию, нажав на домашнюю ссылку. В результате, при нажатии на ссылку компонента Home, компонент сведений должен появиться, а домашний компонент должен быть скрыт.

Найдите мою маршрутизацию app.module.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth.guard';
import { AdminComponent }      from './admin/admin.component';
import { DashboardComponent } from './dashboard/Dashboard.component';
import { HomeComponent } from './home/home.component';
import { AppComponent } from './shell/app.component';
import { AppDetailsComponent } from './app-details/app.details.component';

const appRoutes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'details',
        component: AppDetailsComponent
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo:'/home'
    },
    {
        path: '**',
        component: HomeComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Код App.component.html

<app-home></app-home>
<router-outlet></router-outlet>

Ссылка привязки компонента "Главная страница" для перехода из дома к деталям

<div class="mapContainer" id="MapContainer">
    <div class="CustomMapSize">
        <a routerLink="/details"><img src="../../../local-npm-packages/assets/images/WorldMap.png" /></a>
    </div>
</div>

При нажатии на [routerLink = "/ details"] новая страница сведений открывается, как и ожидалось, но макет родительского дома не скрывается.

Может ли кто-нибудь подсказать, есть ли какие-либо проблемы с моей маршрутизацией?


angular angular4-router
person Dilip Solanki    schedule 29.01.2018    source источник
comment
ты нашел какое-нибудь решение?   -  person Mehul Parmar    schedule 16.08.2020

Ответы (3)


arrow_upward
9
arrow_downward

Возможно, макет родительского дома взят из компонента ‹app-home›, который вы указали выше ‹router-outlet›,

Чтобы заменить всю страницу, в вашем app.component.html используйте только следующий элемент:

<router-outlet></router-outlet>
person Shrey Kejriwal    schedule 29.01.2018
comment
Привет, не могли бы вы уточнить ответ? Если используется только ‹router-outlet›, то как насчет пользовательского интерфейса AppComponent? Где тогда отображается кликабельное изображение? - person Anish Mittal; 01.12.2019
comment
@AnishMittal Привет, Аниш. У меня такой же вопрос, как и у вас. Вы нашли какое-нибудь решение? - person Mehul Parmar; 16.08.2020

arrow_upward
5
arrow_downward

Это происходит потому, что вы установили отношения между родителями и детьми. Если вы хотите заменить всю страницу, сделайте это родственными отношениями.

const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'details', component: AppDetailsComponent } ] И в app.component.html нет необходимости вводить <app-home></app-home>. Просто надо написать <router-outlet></router-outlet>

person Zoha Irshad    schedule 29.01.2018
comment
Можете уточнить, как? - person Stefan Falk; 17.04.2018
comment
Привет, в моем случае app.component.html - это первый экран пользовательского интерфейса. Здесь я показываю кнопку. Затем я пишу ‹router-outlet› после этой кнопки. Поэтому при нажатии кнопки следующий компонент отображается чуть ниже кнопки в app.component.html. Я хочу, чтобы при нажатии кнопки эта кнопка должна быть скрыта [означает, что пользовательский интерфейс app.component.html должен быть скрыт], и отображается только следующий компонент. - person Anish Mittal; 01.12.2019

arrow_upward
0
arrow_downward

вам нужно добавить { path: '', component: HomeComponent } в начале вашего app-routing.module, а не 'home', пустая строка направляет приложение прямо на homeComponent при загрузке

person Heather Malloch    schedule 01.12.2020