从子组件中移除父组件

Question

I am experiencing trouble with routing in angular. My URLs seem to work fine but my problem is that when I visit the child component(CreateEventsComponent) the parent component(EventsComponent) shows as well.

How can I remove it from my component?

const routes: Routes = [
      {
        path: '',
        component: EventsComponent,
        data: {
          title: 'Events',
        },
        children: [
          {
            path: 'create',
            component: CreateEventsComponent,
            data: {
              title: 'Create Events',
            },
          },
        ],
      },
    ];

This is my parent html code

<p>Events works!</p>
<router-outlet></router-outlet>

This is my child html code

<p> Create Events works </p>

Answer 1

The code is working as intended if you dont want the parent component to display you have to change the design to something like this

  {
        path: '',
        component: EventsComponent,
        data: {
          title: 'Events',
        },
  },
  {
           path: 'create',
            component: CreateEventsComponent,
            data: {
              title: 'Create Events',
            },
  },]

This ensures that when you visit /create it will only load the CreateEventComponent. Currently it is loading the EventsComponent with the CreateEventsComponent as a child component.