我正在其HTML模板中显示包含routerLink链接的组件 . 我想在用户点击它们时在新选项卡中打开与这些routerLink链接相对应的组件,并且 only 显示这些组件(我不想在新选项卡中显示包含routerLink链接的组件) .

这是我到目前为止尝试的内容:

这是包含组件的组件,该组件在其HTML模板中具有routerLink链接(我们称之为container.component.html):

<div>
    <h1>{{title}}</h1>
    <comp></comp>
</div>
<router-outlet></router-outlet>

这是 comp 组件的模板:

<div>
    <div>{{compName}}</div>
    <ul>
        <li>
            <a [routerLink]="['/comp-info/comp-info-child/:compName', {compName: compName}]" target="_blank">info child</a>     
        </li>
        <li>
            <a [routerLink]="['/comp-info/comp-history']" target="_blank">comp history</a>      
        </li>
    </ul>
</div>

这是我的app.routes.ts文件,定义了应用程序的路由:

/*
  Necessary imports here
*/

export const routes: RouterConfig = [
  {
    path: '',
    component: EmptyComponent,
  },
  {
    path: 'comp-info',
    component: CompInfoComponent,
    children: [
      { path: 'comp-info-child/:compName',  component: CompInfoChildComponent },
      { path: 'comp-history',     component: CompHistoryComponent }
    ]
  }
];


export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

这是comp-info.component.html文件:

<router-outlet></router-outlet>

我设法使用routerLinks浏览组件,但仍然显示 comp 组件,似乎我正在显示container.component.html视图而不是comp-info.component.html视图 .