Путь на другую страницу из Модал в Angular - PullRequest
Новая
       6

Путь на другую страницу из Модал в Angular

0 голосов
/ 17 декабря 2018

Я создал модал, используя MatDialog.Этот модальный режим можно открыть с моей панели инструментов.

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

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

navbar-> модальный <-> LoginComponent / RegistrationComponent (ссылка здесь должна закрывать модальные и перенаправлять)

RegistrationComponent.ts: (в модале) 

registerBuisnessClicked() {
this.dialogRef.close('signup');

}

navbar.ts: 

dialogRef.afterClosed().subscribe(result => {
  if (result === 'signup') {
    console.log('redirecting to signup');
    this.router.navigate(['/signup']);
  }
});

Для тестирования я создал еще одну панель инструментовэлемент в моей панели навигации, который напрямую направляет меня в мою регистрацию, и это работает! 

user() {
this.router.navigate(['/signup']);

}

Внутри моего модального я имею следующий код:

modal.html 

<nav mat-tab-nav-bar mat-align-tabs="center">

        <a mat-tab-link 
          (click)="switchToLogin()"
          [active]="rla1">
          Login
        </a>

        <a mat-tab-link 
          (click)="switchToRegister()"
          [active]="rla2">
          Register
        </a>

      </nav>

modal.ts 

constructor(private router: Router) { }

ngOnInit() {
  this.router.navigate(['/login']);
  this.rla1 = true;
  this.rla2 = false;
}

switchToRegister() {
  this.router.navigate(['/signup'], { replaceUrl: true });
  this.rla1 = false;
  this.rla2 = true;
}

switchToLogin() {
  this.router.navigate(['/login'], { replaceUrl: true });
  this.rla1 = true;
  this.rla2 = false;
}

Спасибо, Якоб

Ответы [ 3 ]

0 голосов
/ 17 декабря 2018

Это простой пример того, как может выглядеть решение

modal.component.ts 

export class ModalComponent {

  constructor(
    public dialogRef: MatDialogRef<ModalComponent >,
    private router: Router,
  ) {

  }

  public navigateToSomewhere(): void {
    this.router.navigate(['somewhere']);
    this.dialogRef.close();
  }

}

modal.component.html 

 <button(click)="navigateToSomewhere()">Navigate</button>
0 голосов
/ 17 декабря 2018

Когда вы закрываете модальное пространство, вы можете просто использовать: 

onClose() {
  this.dialogRef.close('closed');
}

Чтобы перенаправить его на другую страницу, вам необходимо подписаться на закрытое событие, с которого вы открыли matDialog.Как показано ниже: 

dialogRef.afterClosed().subscribe((result) => {
  if (result === 'closed') {
       this.router.navigate(['routing-path']);
  }
});

Надеюсь, это поможет.

0 голосов
/ 17 декабря 2018

Вы можете просто добавить ссылку на роутер в логин и зарегистрироваться / кнопки / ссылки.Пример: 

<nav>
 <a routerLink="/sign-up" routerLinkActive="active">Sign Up</a>
 <a routerLink="/login-route" routerLinkActive="active">Login</a>
</nav>

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

Вы также можете добиться того же, используя использование(click) на кнопках и выполняйте определенные операции перед перенаправлением с компонента модал.

EX: 

 this.router.navigate(['../new-route'], { relativeTo: this.route });

Взгляните на пример маршрутизатора в документации здесь.

...