Link to another component without outlet

Question

In my Angular5 app i have router-outlet named 'admin' (/admin), which have child router 'news' /admin/(admin:news), and i want create link to component CreatePostComponent /admin/(admin:news/new-post).

Here is my router:

  {
    path: "admin",
    component: AdminComponent,
    children: [
      {
        path: "",
        redirectTo: "/admin/(admin:news)",
        pathMatch: "full"
      },
      {
        path: "news",
        component: NewsComponent,
        outlet: 'admin',
        children: [
          {
            path: "new-post",
            component: CreatePostComponent
          }
        ]
      }
    ]
  }

And link in template: <a [routerLink]="['new-post']">New post</a>

This is work, my url change to /admin/(admin:news/new-post), but i still see NewsComponent, instead of CreatePostComponent. How should i do this correctly?

Also, can i have normal kind urls in named router-outlet (/admin/news, not /admin/(admin:news));

Answer 1

if your NewsComponent does not have router-outlet your router should look like this:

{
    path: "admin",
    component: AdminComponent,
    children: [
      {
        path: "",
        redirectTo: "/admin/(admin:news)",
        pathMatch: "full"
      },
      {
        path: "news",
        component: NewsComponent,
        outlet: 'admin',
      },
       {
            path: "news/new-post",
            component: CreatePostComponent,
            outlet: 'admin',
      }
    ]
  }

this is how you reuse the outlet and have a mock of a child route

you only going to display a component inside if your have a router outlet

the route to call your link should look like

[routerLink]="[{outlets:{admin:['news','new-post']}}]"

or

[routerLink]="[{outlets:{admin:['news/new-post']}}]"