Angular中如何从一个组件在新浏览器标签页打开另一个组件

问题出在AppComponent是应用的启动根组件，每次打开新标签页加载应用时，都会先渲染它的内容（包括按钮），再处理路由。要让新标签页只显示MapComponent，需要调整路由结构，让根组件仅作为路由容器：

方法一：拆分组件（推荐） #

1. 新建HomeComponent存放按钮 #

执行Angular CLI命令生成组件：

ng generate component home

将原AppComponent的按钮移到HomeComponent模板：

<!-- home.component.html -->
<button (click)="openMapInNewTab()">Open Map</button>

在HomeComponent的TS文件中添加打开新标签页的方法：

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  openMapInNewTab() {
    window.open('/map', '_blank');
  }
}

2. 修改AppComponent为路由容器 #

清空AppComponent的模板，仅保留路由出口：

<!-- app.component.html -->
<router-outlet></router-outlet>

3. 更新路由配置 #

修改AppRoutingModule，设置默认路由指向HomeComponent，/map路由指向MapComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map/map.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'map', component: MapComponent }
];

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

4. 更新AppModule声明 #

确保HomeComponent被添加到declarations数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改完成后：

• 主页面会渲染HomeComponent的按钮
• 点击按钮打开新标签页访问/map时，仅会显示MapComponent的内容，不会出现按钮

方法二：通过路由控制按钮显示（无需新建组件） #

如果不想新增组件，可以在AppComponent中根据当前路由判断是否显示按钮：

1. 修改AppComponent模板 #

添加路由判断，仅在默认路径显示按钮：

<!-- app.component.html -->
<button *ngIf="currentRoute === ''" (click)="openMapInNewTab()">Open Map</button>
<router-outlet></router-outlet>

2. 更新AppComponent逻辑 #

监听路由变化，获取当前路由路径：

// app.component.ts
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentRoute = '';

  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 去掉路径开头的/，方便判断
      this.currentRoute = event.urlAfterRedirects.replace(/^\//, '');
    });
  }

  openMapInNewTab() {
    window.open('/map', '_blank');
  }
}

3. 更新路由配置 #

设置默认路由指向AppComponent，/map路由指向MapComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map/map.component';

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'map', component: MapComponent }
];

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

这种方法无需新增组件，但逻辑相对复杂，适合简单场景。

内容的提问来源于stack exchange，提问作者sandanuwan dharmarathna