Link to new HTML page with button - Typescript-CodePudding

how to refer to a new HTML page in Typescript? I would like that when you click on the button on the home page, the other page opens (no separate window, just overwrites the home page).

I tried that but it just adds the content of the new page at the bottom and I don't want that:

this.router.navigateByUrl('home');
this.router.navigate(['/','home']);

CodePudding user response：

please try this one <button [routeLink]="['/location']"> Location .

CodePudding user response：

Anna,

If I understood you right.)

I guess it might be something with router-outlet.

Maybe, in your html file you're adding some components first, and than router-outlet. That's why you see components and then the content below you want to render.

For example in your root app.component.html if you'll add such structure:

<app-header></app-header>
<app-about></app-about>
<router-outlet></router-outlet> // Shows your routing component

And in your routing paths:

{path: 'home', component: HomeComponent} // <router-outlet> by the path 'home' shows exactly the HomeComponent.

You will see in the browser: HeaderComponent, AboutComponent and HomeComponent(and everything what contains header, about and home.component.html).

If you want owerwrite page by HomeComponent, from your app.components.html you need to delete tags:

<app-header></app-header>
<app-about></app-about>.