Вызов компонента Angular 7 из другого компонента с помощью window.open ()

Question

Я использую Angular 7 в своем проекте. В моем приложении всего 3 компонента. Все компоненты находятся на одном уровне (означает, что путь компонентов находится на одном уровне)

Я хочу вызвать компонент по нажатию кнопки из другого компонента, но в то время я не хочу обновлять свою страницу. Я просто хочу показать данные в этом новом окне.

Кто-нибудь может подсказать, как мне добиться этого в моем приложении Angular 7? ниже мой подход

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

вызов компонента в скрипте типа выглядит следующим образом.

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

В указанной выше функции поиска указано имя моего компонента пользовательский интерфейс этой страницы компонента я хочу показать в этом окне. В компоненте поиска у меня есть search.component.html и другие ts файлы.

Так что, в принципе, всякий раз, когда я нажимаю на кнопку, он должен вызывать этот компонент, чтобы в этом новом окне я мог отображать пользовательский интерфейс вызываемого компонента.

Может кто-нибудь помочь мне с этим?

Заранее спасибо.

Answer 1

Опция A, Angular Router (рекомендуется)

позволяет осуществлять переход от одного вида к другому при выполнении пользователями задач приложения.

вам необходимо создать маршруты иназначить компонентам

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>

Answer 2

Я думаю, вы ищете сервис роутера. Это поможет вам перемещаться между различными компонентами. Небольшой пример ниже. Привязать событие клика как

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

И используйте метод navigate, чтобы перейти к нужному маршруту при нажатии.

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

Не забудьте добавить службу маршрутизатора в конструктор вашего компонента как

constructor(private _router: Router) { }

И импортируйте сервис Router как

import { Router } from '@angular/router'

Редактировать: Поскольку ОП хочет открыть его в новом окне, можно использовать целевой атрибут как

<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