我正在其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视图 .