我有一个简单的有两个组件的Angular 应用程序。我想在新选项卡中打开一个组件。
这是我的申请表。
在我的AppComponent.html文件中有一个按钮。当我点击这个按钮时，我想在另一个选项卡中打开MapComponent.html文件。在本例中，我不想将AppComponent按钮移动到MapComponent.html文件中。openMapInNewTab(address: string)我想把地址传递给MapComponent.html文件，并根据给定的地址显示谷歌Map。在谷歌Map的顶部，我想添加用户指南，如何从Map上获取lat lng。这就是为什么我想在新组件中打开Map，然后才想保持高度和宽度为200px。我怎样才能做到这一点。我已经尝试了添加路线和许多方法。但我做不到。

AppComponent.ts文件

import { Component } from '@angular/core';
import { Router } from '@angular/router';

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

  constructor(private router: Router) {}

  openMapInNewTab(address: string) {    
  }
}

AppComponent.html文件

<button (click)="openMapInNewTab()">Open Map</button>

MapComponent.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  ngOnInit(): void {
    
  }   
}

MapComponent.html文件

<p>map works!</p>

AppRoutingModule文件

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

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

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