我为登录和注册做了一个切换按钮。我想按照此按钮切换状态导航到各个组件。
如何在条件内传递或路由自定义组件?
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>
答案 0 :(得分:2)
您可以使用角度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']);
}
}