Как я могу направить компоненты в другой компонент без изменения URL? - PullRequest
Новая
       2

Как я могу направить компоненты в другой компонент без изменения URL?

0 голосов
/ 28 апреля 2018

Давайте предположим, что у меня есть проект Angular 5 с маршрутизацией. Например, /home, /landing-page, etc. Кроме того, давайте предположим, что на моей целевой странице с URL - localhost:4200. Я хочу создать панель входа в систему. У меня есть два поля - username и password, одна кнопка sign in и две другие кнопки forgot password? и Don't have an account?. Моя проблема в том, что когда пользователь нажмет Forgot password? или Don't have an account?, он не будет перенаправлен на другую страницу с URL-адресом, подобным localhost:4200/sign-up, но останется на той же странице с URL-адресом localhost:4200 и полями username, password, sign in, forgot password? и * 1013. * исчезнет и на их месте будут отображаться поля, связанные с регистрацией. Я не уверен, знаете ли вы, что я имею в виду. Хороший пример, которого я хочу достичь, это https://www.instagram.com. Независимо от того, нажимаете ли вы Зарегистрироваться или Войти, у вас все еще остается тот же URL, и изменяется только один компонент. Вы знаете, как мне этого добиться? Я не уверен, должен ли я использовать маршруты или, возможно, другой способ более оптимален для этого? Заранее спасибо.

Мой код выглядит следующим образом. Я добавил только самый важный код из выбранных файлов.

index.html: 

</head>
<body>
<app-root></app-root>
</body>
</html>

app.component.html: 

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer *ngIf="removeFooter()"></app-footer>

На данный момент мой home.component выглядит следующим образом:

home.component.html: 

<div *ngIf="isSignIn()">
  <app-sign-in></app-sign-in>
</div>

<div *ngIf="isSignUp()">
  <app-sign-up></app-sign-up>
</div>

<div *ngIf="isForgotPassword()">
  <app-forgot-password></app-forgot-password>
</div>

home.component.ts: 

    constructor() {
      this.signin = true;
      this.signup = false;
      this.forgot = false;
    }

  isSignUp() {
    if (this.signup === true) {
      return true;
    }
    else {
      return false;
    }
  }

  isSignIn() {
    if (this.signin === true) {
      return true;
    }
    else {
      return false;
    }
  }

  isForgotPassword() {
    if (this.forgot === true) {
      return true;
    }
    else {
      return false;
    }
  }

вход in.component.html: 

<div class="content-center">
  <div class="container">

    <div class="title-brand">

      <div align="center">

        <input style="background-color: black; border-color: white; color:white; width: 270px" type="text" value="" class="form-control" placeholder="USERNAME">

        <br>

        <input style="background-color: black; border-color: white; color:white; width: 270px" type="text" value="" class="form-control" placeholder="PASSWORD">

        <div class="row">
          <div class="col-md-8">
            <br>
            <button style="background-color: black; border-color: white; color:white; width: 270px" type="button"  class="btn btn-danger">Log in</button>
          </div>
        </div>

        <br>

        <h6  style = "color: white" [routerLink]="['/main']" skipLocationChange class=pointer>Forgot Password?</h6>
        <h6 style="color: white" [routerLink]="['/sign-up']" class=pointer>Don't have an account?</h6>

      </div>
    </div>
  </div>
</div>

UPDATE Я добавил исходный код sign-in.component.html к вопросу. Можете ли вы показать мне, как я могу переключить компонент sign-in.component.html после нажатия Забыли пароль? или нет аккаунта? к компоненту Forgot.component.html или sign-up.component.html

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

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

Пример стекаблика

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

Вы можете просмотреть код на эту ссылку

EDIT

Вам нужно снять с себя ответственность за то, какой компонент показывать компоненту контейнера (то есть родительскому компоненту). В обновленном примере stackblitz я сделал HomeComponent ответственным за отображение правильного компонента. Это означает, что компоненты SignUp/SignIn/ForgotPassword не несут ответственности за переключение между собой - это задание для HomeComponent (или любого другого компонента, который вы хотите использовать для этого задания).

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

home.component.ts 

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

@Component({
  selector: 'app-home',
  template:
  `<div *ngIf="signin">
      <app-sign-in></app-sign-in>
      <button (click)="showSignUp()">Sign up</button>
      <button (click)="showForgot()">Forgot password</button>
    </div>

    <div *ngIf="signup">
      <app-sign-up></app-sign-up>
      <button (click)="showSignIn()">Sign in</button>
      <button (click)="showForgot()">Forgot password</button>
    </div>

    <div *ngIf="forgot">
      <app-forgot-password></app-forgot-password>
      <button (click)="showSignUp()">Sign up</button>
      <button (click)="showSignIn()">Sign in</button>
    </div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HomeComponent {
  public signup: boolean = true;
  public signin: boolean = false;
  public forgot: boolean = false;

  constructor() {}

  public showSignIn() {
    this.signin = true;
    this.signup = this.forgot = false;
  }

  public showSignUp() {
    this.signup = true;
    this.signin = this.forgot = false;
  }

  public showForgot() {
    this.forgot = true;
    this.signin = this.signup = false;
  }
}
0 голосов
/ 28 апреля 2018

Используйте skipLocationChange от маршрута NavigationExtras. Например. 

<h6  style = "color: white" [routerLink]="['/main']" skipLocationChange>Forgot Password?</h6>
<h6 style="color: white" [routerLink]="['/sign-up']" skipLocationChange>Don't have an account?</h6>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...