Переход к пользовательскому компоненту на основе состояния кнопки

Я сделал кнопку переключения для входа и регистрации. Я хочу перейти к соответствующим компонентам в соответствии с состоянием переключения этих кнопок.

Как передать или направить пользовательский компонент внутри условия?

app.component.ts

import { Component } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { templateJitUrl } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Demo';

  public show: boolean = false;
  public buttonName: any = 'Register';

  toggle() {
    this.show = !this.show;

    if(this.show) {
      this.buttonName = "Login";
      console.log(this.buttonName);
      // code to load login component

    }
    else {
      this.buttonName = "Register";
      console.log(this.buttonName)
      // code to load register component
    }

app.component.html

<html>
  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="toggle()" id="bt" routerLink="/register">{{buttonName}}</button>
     </div>
     <br />

<router-outlet></router-outlet>
</body>
</html>

angular angular4-router
person Jay    schedule 05.07.2018    source источник
comment
Можете ли вы также поделиться кодом своей HTML-страницы?   -  person eduPeeth    schedule 05.07.2018
comment
Вы абсолютно уверены, что хотите отложить загрузку компонентов? У меня такое чувство, что вы действительно хотите только показать различные состояния вашего приложения, для которых такой подход не нужен.   -  person Jens Habegger    schedule 05.07.2018
comment
Проверить обновленный пост. @eduPeeth   -  person Jay    schedule 05.07.2018
comment
@Jens Habegger Я хочу переключить кнопку для регистрации / входа и соответственно загрузить компоненты.   -  person Jay    schedule 05.07.2018
comment
Из любопытства, что побуждает вас к такому подходу?   -  person Jens Habegger    schedule 05.07.2018
comment
@Jens Habegger: Мы должны конвертировать веб-страницы в Angular 4. Я здесь новичок, поэтому делаю все шаг за шагом, чтобы впоследствии реализовать ту же концепцию.   -  person Jay    schedule 05.07.2018
comment
Спасибо за информацию, я отредактировал ваш вопрос, чтобы лучше отразить разницу между загрузкой (что означает, что компонент фактически запрашивается с сервера только тогда, когда он необходим) и навигацией. Удачи в вашем проекте!   -  person Jens Habegger    schedule 05.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать angular Router для навигации по маршрутам. Поскольку вы перемещаетесь по условию, легко использовать Router вместо routerLink в шаблоне.

<html>
  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="toggle()" id="bt">{{buttonName}}</button>
     </div>
     <br />

<router-outlet></router-outlet>
</body>
</html>

В component.ts импортируйте Router и вставьте его в свой компонент.

import { Router } from '@angular/router';


constructor(private router: Router) {

}

toggle() {
    this.show = !this.show;

    if(this.show) {
      this.buttonName = "Login";
      this.router.navigate(['/login']);

    }
    else {
      this.buttonName = "Register";
      this.router.navigate(['/register']);
    }
}
person Anuradha Gunasekara    schedule 05.07.2018