为什么在同一页面打开新组件

Question

我是 Angular 的新手，我用两个组件创建了非常简单的应用程序，我只想从一个组件导航到另一个组件。

但是第二个组件在相同（第一个）组件中打开。我怎样才能打开第二个comp。在新页面？

这是我的代码

<td> <a routerLink="devicelist">Privacy Policy</a> </td>
<div>
  <router-outlet></router-outlet>
</div>

应用-route.module.ts文件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { DeviceListComponent } from './device-list/device-list.component';

const routes: Routes = [
  { path: 'devicelist', component: DeviceListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],

})
export class AppRoutingModule { }

编辑：1

app.component.html

<router-outlet></router-outlet>

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { DeviceListComponent } from './device-list/device-list.component';

const routes: Routes = [
  {
    path: '',
    component: ProductsComponent,
  },
  { path: 'devicelist', component: DeviceListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

Comp1 文件

<div>
    <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }

        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        tr:nth-child(even) {
          background-color: #dddddd;
        }
        </style>
    <table >
        <tr >
          <th>Product Name </th>
          <th>Compliance</th>
          <th>Failed</th>
          <th>Inprogress</th>
          <th>Reprocess</th>
        </tr>
        <tr>           
            <td>Connected Courrier</td>
            <td> <a routerLink="devicelist">Privacy Policy</a> </td>
            <td>Failed</td>
            <td>Inprogress</td>
            <td>Reprocess </td>
        </tr>

        <tr>           
            <td>Admin App</td>
            <td>20</td>
            <td>Failed</td>
            <td>Inprogress</td>
            <td>Reprocess </td>
        </tr>

      </table>

    </div>

Comp2 文件

<div>
    <p>device-list works!</p>
</div>

Answer 1

您已将 <router-outlet></router-outlet> 放在第一个 component.so 中，每当您导航到第二个组件时，它将在第一个组件中呈现。

注意：将 <router-outlet></router-outlet> 放在 app.component.html 中并创建两个单独的组件然后就可以工作了

Answer 2

将 router-outlet></router-outlet> 放在 app.component.html 中，然后创建 2 个单独的组件并相应地提供链接。这将有助于导航。

Answer 3

只需在您的 app.component.html 中添加 <router-outlet></router-outlet>，仅此而已。
在您的 appModule 中添加路由

imports: [RouterModule.forRoot([
  { path: 'first', component: FirstComponent},
  { path: 'second', component: SecondComponent }
])],

为什么在同一页面打开新组件

Why new component opening in the same page

routerlink

angular