Angular 根据按钮状态导航到自定义组件_Angular_Angular4 Router

Angular 根据按钮状态导航到自定义组件

angular

Angular 根据按钮状态导航到自定义组件,angular,angular4-router,Angular,Angular4 Router,我做了一个登录和注册的切换按钮。我想根据此按钮切换状态导航到各个组件如何在条件内传递或路由自定义组件应用程序组件.ts import { Component } from '@angular/core'; import { RouterModule, Router, Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { RegisterCompon

我做了一个登录和注册的切换按钮。我想根据此按钮切换状态导航到各个组件

如何在条件内传递或路由自定义组件

应用程序组件.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>


欢迎来到{{title}}！
{{buttonName}}

您可以使用角度

路由器

导航到路由。当您根据条件进行导航时，在模板中使用

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>

您可以使用角度

路由器导航到路由。当您根据条件进行导航时，在模板中使用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>

您是否也可以共享HTML页面的代码？您是否绝对确定要延迟加载组件？我有一种感觉，你真的只想显示你的应用程序的不同状态，这真的不需要这种方法检查更新后的帖子@eduPeeth@JensHabegger我想切换注册/登录按钮，并相应地加载组件。出于好奇，这种方法背后的动机是什么？您是否也可以共享HTML页面的代码？您是否绝对确定要延迟加载组件？我有一种感觉，你真的只想显示你的应用程序的不同状态，这真的不需要这种方法检查更新后的帖子@eduPeeth@JensHabegger我想切换注册/登录按钮，并相应地加载组件。出于好奇，这种方法背后的动机是什么？