切换到子组件时如何隐藏父组件

Question

When I start the application, I have the "AppComponent" component displayed. Through it, using AuthGuard I turn or do not go to the module routes: GalleryModule . My problem is that when I go over the child routes GalleryAddComponent or GalleryItemComponent to GalleryComponent , my father GalleryComponent does not hide, and the child component is displayed below. and I need that during the transition on the child GalleryAddComponent and GalleryItemComponent my father would hide GalleryComponent . How to implement it?

Structure of my project:

AppRoutingModule:

 const appRoutes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'app-root' }, ]; @NgModule({ imports: [ CommonModule, RouterModule.forRoot(appRoutes) ], exports: [RouterModule], }) 

GalleryRoutingModule:

 const galleryRoutes: Routes = [ { path: 'gallery', canActivate: [AuthGuard], component: GalleryComponent, children: [ {path: 'gallery-add', component: GalleryAddComponent}, {path: 'galleryItem/:id', component: GalleryItemComponent}, ] }, ]; @NgModule({ imports: [ CommonModule, RouterModule.forChild(galleryRoutes) ], exports: [RouterModule], declarations: [] }) 

template of GalleryComponent:

  <div class="header"> <div class="row"> <div class="col-lg-12 col-md-12 col-12"> <h1>{{gallery}}</h1> <div class="create-post"> <a routerLink="gallery-add" class="btn btn-outline-success tog" > Add New Post </a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection"> <a [routerLink]="['galleryItem', pic.id]"> <img [src]="pic.url" alt="test" class="img-responsive"> <p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p> </a> <div class="card buttons"> <a class="btn btn-danger del" (click)="removePost(pic.id)">Delete</a> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-12"> </div> </div> <router-outlet></router-outlet> 

Answer 1

SO you have to remove the child routes from GalleryRoutingModule . And router-outlet from the Gallerycomponent. And need to make the routes normal way (no nested/ child routes ) in the GalleryRoutingModule

Answer 2

The problem is with the placement of <router-outlet></router-outlet> . It should not be in gallery.component.html . If you have <router-outlet></router-outlet> in app.component.html then it will handle the routing.

In short just remove <router-outlet></router-outlet>

Alternative

If you are facing the issue related AuthGuard. Create new Component which handles the routing for the Gallery.

Follow these steps

1. Create Main Component for Gallary

gallery-main.component.html

<router-outlet></router-outlet>

gallery-main.component.ts

@Component
Class GalleryMainComponent{

}

2. Change in the routing-

const galleryRoutes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        component: GalleryMainComponent,
        children: [
            {path: 'gallery', component: GalleryComponent},
            {path: 'gallery-add', component: GalleryAddComponent},
            {path: 'galleryItem/:id', component: GalleryItemComponent},
        ]
    },
];

Note : Do not forget to remove the <router-outlet></router-outlet> from gallery.component.html

Answer 3

Service:

public navigation = new Subject<any>();
public navigation$ = this.navigation.asObservable();

In GalleryAddComponent & GalleryItemComponent, You can create emit an observable using service.

this.service.navigation.next(true);

In Gallery Component, you can subscribe to listen for the changes.

public displayGalleryContent = true;
this.service.navigation$.subscribe((isreached)=>{
  if(isreached){
     this.displayGalleryContent = true;
  }
});

Template:

<div *ngIf="displayGalleryContent"></div>