Блог

Главная - Вопросы по программированию - Angular не уничтожает исходный компонент после маршрутизации

Angular не уничтожает исходный компонент после маршрутизации

#angular #angular-ui-router #angular8

#angular #angular-ui-router #angular8

Вопрос:

Я создаю приложение angular 8, в котором есть 2 компонента: LandingComponent, BlogDetailComponent и, конечно, основной компонент AppComponent

Как вы можете видеть ниже, существует маршрутизация из LandingComponent в BlogDetailComponent. Когда я нажимаю привязку к деталям блога, он успешно перенаправляет страницу на BlogDetailComponent, но проблема в том, что направленная страница также содержит информацию о целевой странице. Вот так;

 Landing Page

Blog Detail Content

Я в замешательстве, я ожидаю, что исходная страница будет уничтожена, а целевая страница будет создана. Но я думаю, я ошибаюсь. Любая помощь?

app-component.html

 <html>
<app-landing></app-landing>
</html>

landing-component.html

     ...
<li><a routerLink="blog-detail">Landing Page</a></li>
<router-outlet></router-outlet>
   ...

blog-detail-component.html

     ...
   <div>Blog Detail Content</>
   ...

app-routing-module.ts

     ...
    const routes: Routes = [
        { path: 'blog-detail', component: BlogDetailComponent }
    ];

    @NgModule({
       declarations: [],
       imports: [CommonModule, RouterModule.forRoot(routes)],
       exports: [RouterModule]
    })
    export class AppRoutingModule { }

Комментарии:

1. Поместите <выход маршрутизатора></router-outlet> в app.component.html не в landing-component.html , и создайте новый маршрут { path: «, component: LandingComponent } для загрузки компонента landing по умолчанию

2. это сработало @Abhijit я также удалил <app-landing></app-landing> из app-component.html так что все направления основаны на файле маршрутов. Спасибо. если вы добавите в качестве ответа. Я это одобрю.

3. хорошо, что вы это исправили, добавили в качестве ответа 👍

Ответ №1:

Место <router-outlet></router-outlet> в app.component.html не в landing-component.html , и создайте новый маршрут { path: '', component: LandingComponent } для загрузки компонента посадки по умолчанию