Question

我在项目中使用Angular 7。我的应用程序中总共有3个组件。所有组件都处于同一级别（意味着组件的路径处于同一级别）

我想从其他组件中单击按钮来调用组件，但是当时我不想刷新页面。我只想在新窗口中显示数据。

有人可以建议我如何在Angular 7应用程序中实现此目标？下面是我的方法

<button (click)="myFunction()">Try it</button>

在类型脚本中调用组件如下。

myFunction() {
  window.open("http://localhost:4200/#/pages/search");
}

在上面的函数中搜索是我的组件名称。我要在该窗口中显示的组件页面的UI。在搜索组件中，我有search.component.html和其他ts文件。

因此，基本上，每当我单击按钮时，它都应该调用该组件，以便在新窗口中可以显示正在调用的组件的UI。

有人可以帮我吗？

谢谢。

Answer 1

我认为您正在寻找路由器服务。这将帮助您在不同组件之间导航。下面是一个小例子。将点击事件绑定为

<a (click)="RouteToComponent()">Click ME</a>

并使用navigate方法单击以导航到所需的路线。

RouteToComponent():void {
    this._router.navigate(['/ComponentRoute']);
}

别忘了将路由器服务作为

注入组件的构造函数中

constructor(private _router: Router) { }

并将路由器服务导入为

import { Router } from '@angular/router'

编辑：由于OP希望在新窗口中将其打开，因此可以将target属性用作

<a target="_blank" [routerLink]="['/ComponentRoute']">Click ME</a>

编辑2：由于窗口应该较小，所以

RouteToComponent():void {
    window.open (window.location.origin + "/ComponentRoute","My Component","menubar=1,resizable=1,width=350,height=250");
}

有关window.open的更多信息

Answer 2

选项A，角路由器（推荐）

当用户执行应用程序任务时，它可以从一个视图导航到下一个视图。

您需要创建路由并分配给组件

const appRoutes: Routes = [
  { path: 'route-1', component: Component1},
  { path: 'route-2', component: Component2},
}

使用路由器插座

<router-outlet></router-outlet>

并在元素上放置此属性

<element routerLink="/route-1"></element>

https://run.stackblitz.com/api/angular/v1

选项B，使用变量隐藏/显示组件

在ts TS中可变

export class AppComponent {
  option= "A"
}

HTML

<a (click)="option='A'">Component A</a>
<a (click)="option='B'">Component B</a>
<a (click)="option='B'">Component C</a>

<component-A*ngIf="option=='A'"></A>
<component-B*ngIf="option=='B'"></A>
<component-C*ngIf="option=='C'"></A>

使用window.open（）

2 个答案: