Using Angular.When I click the link, I want to open the new page to show, not showing below the link

Question

Using Angular. When I click the link, I want to open the new page to show, not showing below the link.

I tried in app-routing module.ts

import{WorksComponent} from './works/works.component';
import { ZenigameComponent } from './zenigame/zenigame.component';

const routes: Routes = [
{path:'works-component',component:WorksComponent,
        children:[{path:'zenigame-component',component:ZenigameComponent,}]}];

Then I tried in works.component.ts

<a routerLink="zenigame-component" routerLinkActive="active">DAY14:ゼニガメ</a>
    <router-outlet></router-outlet>

In zenigame.component.ts

<p>zenigame works!</p>

It shows like this It shows below the link.

I don't want this, When I click the link "DAY14:ゼニガメ", I want it to show "zenigame works." on a different page.

Like, when you want to search "zenigame" on google.com you click the search button, and the different page opens to show the result of the search.

Thank you for reading. Sorry for my poor English.

Answer 1

Setting up basic routing in Angular 2+

This occurs because of the position of your <router-outlet> is on the same route as your link.

If you want to separate them, you must move the <router-outlet> into a separate component.

Routing Example

First change your app.component.html to only contain the router-outlet, plus any elements you want to be on all of your pages.

<router-outlet></router-outlet>

Then, setup your routes, one for the page with your link, and another for your actual page:

import { Component } from "@angular/core";

@Component({
  template: `
    <a routerLink="page">Go to page</a>
  `
})
export class LinkComponent {}

import { Component } from "@angular/core";

@Component({
  template: "<h1>Page Works!</h1>"
})
export class PageComponent {}

and in your module with your routes:

const routes: Routes = [
  {
    path: "",
    component: LinkComponent
  },
  {
    path: "page",
    component: PageComponent
  }
];


@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], //setup the routes
  declarations: [AppComponent, HelloComponent, LinkComponent, PageComponent], // declare the components
  bootstrap: [AppComponent]
})
export class AppModule {}

And that's it. You now have a "template" that is included on all pages in your app.component.html and each other "page" is a separate view which will be included after the <router-outlet>

Resources

Working Stackblitz

Angular IO Routing

Answer 2

Possible duplicate Angular 2 Routing run in new tab

I'd suggest the following:

<a target="_blank" routerLink="zenigame-component" routerLinkActive="active">DAY14:ゼニガメ</a>