使用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>