使用Angular。当我点击链接时，我想打开新页面显示，链接下方不显示

Question

使用 Angular。 当我单击链接时，我想打开要显示的新页面，而不是显示在链接下方。

我在 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,}]}];

然后我尝试了works.component.ts

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

在 zenigame.component.ts

<p>zenigame works!</p>

它显示如下它显示在链接下方。

我不想要这个，当我点击链接“DAY14：ゼニガメ”时，我希望它显示“zenigame works”。 在不同的页面上。

就像，当您想在 google.com 上搜索“zenigame”时，您单击搜索按钮，然后打开不同的页面以显示搜索结果。

感谢您的阅读。 对不起我的英语不好。

Answer 1

在 Angular 中设置基本路由 2+

这是因为您的<router-outlet>的 position 与您的链接在同一条路由上。

如果你想将它们分开，你必须将<router-outlet>移动到一个单独的组件中。

路由示例

首先将您的app.component.html更改为仅包含路由器插座，以及您希望在所有页面上出现的任何元素。

<router-outlet></router-outlet>

然后，设置您的路线，一条用于带有链接的页面，另一条用于您的实际页面：

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 {}

并在您的模块中使用您的路线：

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 {}

就是这样。 现在，您的app.component.html的所有页面上都包含一个“模板”，并且每个“页面”都是一个单独的视图，将包含在<router-outlet>之后

资源

工作堆栈闪电战

Angular IO 路由

Answer 2

可能重复Angular 2 路由在新选项卡中运行

我建议如下：

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