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

【问题标题】：Why new component opening in the same page为什么在同一页面中打开新组件
【发布时间】：2019-12-26 11:49:22
【问题描述】：

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

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

这是我的代码

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

app-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>

app-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>

【问题讨论】：

路由器插座是插入当前路由组件的位置。它在您的第一个组件中。因此，当您导航到您的唯一路线时，第二个组件将插入第一个组件中，靠近路由器插座。如果您希望第一个组件消失，那么路由器出口应该在您的应用组件中，并且您的其他两个组件都应该是路由的组件。
您的浏览器控制台有错误吗？在空路由上设置 pathMatch: full 有影响吗？

标签： angular routerlink

【解决方案1】：

您已将<router-outlet></router-outlet> 放置在第一个组件中。因此，每当您导航到第二个组件时，它都会在第一个组件中呈现。

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

【讨论】：

我已经将 comp 1st 作为 root 所以 app.component.html 没有被使用，我想
router-outlet 充当 Angular 根据当前路由器状态动态填充的占位符。 angular.io/api/router/RouterOutlet
现在我应该做些什么改变，因为我的根是第一个组件
我会在几分钟后分享一个例子
@ArvindChourasiya 这就是你需要改变的。如果您只想在特定路线上显示某些东西，那么它不应该在根组件内，它会始终显示。

【解决方案2】：

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

【讨论】：

我已经将 root 作为我的第一个组件，所以我认为 appComoent 没有被使用。我现在该怎么办
你能通过stackBlitz分享你的代码吗？
stackBlitz 上是否有任何工具可以上传现有代码？

【解决方案3】：

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

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

【讨论】：