Маршрутизатор Angular 4 и модальный диалог

У меня есть приложение Angular 4 SPA с использованием маршрутизатора Angular. Я хочу иметь гиперссылку, открывающую компонент в новом диалоговом окне с помощью Bootstrap 4. Я уже знаю, как открыть модальное диалоговое окно из функции.

Но как открыть его по гиперссылке?

<a [routerLink]="['/login']">Login</a>

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

Другой вопрос - можно ли это сделать программно? Так, чтобы я смог

this.router.navigate(['/login']);

а модальный диалог входа в систему отображается поверх текущего компонента?

Какие-либо предложения?


typescript angular angular4-router
person Sergiy    schedule 16.06.2017    source источник

Ответы (2)


arrow_upward
10
arrow_downward

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

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

@Component({
  selector: 'cmp1',
  templateUrl: './cmp1.component.html',
  styleUrls: ['./cmp1.component.css'],
})
export class Cmp1 implements OnInit {

    constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() {
        this.activatedRoute.params.subscribe(params => {
            if (params["modal"] == 'true') {
                // Launch Modal here
            }
        });
    }
}

Думаю, тогда у вас будет ссылка, которая выглядела бы примерно так: <a [routerLink]="['/yourroute', {modal: 'true'}]">

Лучшие примеры можно найти здесь: Блог Route

person birwin    schedule 16.06.2017
comment
Спасибо за предложение. Какой компонент будет отображаться в / yourroute? Это будет Cmpl? - person Sergiy; 17.06.2017
comment
Похоже, вы действительно хотите просто изменить параметры маршрута, а не сам маршрут ... Я не делал этого раньше, но вы можете посмотреть это ссылка - person birwin; 20.06.2017

arrow_upward
2
arrow_downward

Вы также можете сделать это, используя путь вместо приведенного выше ответа, в котором используется параметр запроса. Оба варианта подробно обсуждаются здесь:

https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177

TL; DR:

Создайте фиктивный компонент, который просто открывает модальное окно при создании:

@Component({
  template: ''
})
export class LoginEntryComponent {
  constructor(public dialog: MatDialog, private router: Router,
    private route: ActivatedRoute) {
    this.openDialog();
  }
  openDialog(): void {
    const dialogRef = this.dialog.open(LoginComponent);
    dialogRef.afterClosed().subscribe(result => {
      this.router.navigate(['../'], { relativeTo: this.route });
    });
  }
}

Затем добавьте фиктивный компонент в свой маршрут:

RouterModule.forRoot([
{
  path: 'home',
  component: BackgroundComponentForModal,
  children: [
    {
      path: 'dialog',
      component: LoginEntryComponent
    }
  ]
},
{ path: '**', redirectTo: 'home' }

])

person John Crowson    schedule 21.02.2019