Angular 角度视图中网页之间的导航_Angular

Angular 角度视图中网页之间的导航

angular

Angular 角度视图中网页之间的导航,angular,Angular,我正在为授权管理应用程序开发一个身份验证网页，如下图所示：我想做的是，当我点击忘记登录/密码按钮时，会出现一个新页面，如下所示：问题是我的代码在这里不起作用，这就是我所做的：首先，这里是我的登录页面的html代码： <!DOCTYPE html> <html lang="en"> <head> <title>Login V1</title> <meta charset="UTF-8"> &l

我正在为授权管理应用程序开发一个身份验证网页，如下图所示：

我想做的是，当我点击忘记登录/密码按钮时，会出现一个新页面，如下所示：

问题是我的代码在这里不起作用，这就是我所做的：

首先，这里是我的登录页面的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login V1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->  
    <link rel="icon" type="image/png" href="/assets/login-page/images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="/assets/login-page/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="/assets/login-page/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="/assets/login-page/vendor/animate/animate.css">
<!--===============================================================================================-->  
    <link rel="stylesheet" type="text/css" href="/assets/login-page/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="/assets/login-page/vendor/select2/select2.min.css">
<!--===============================================================================================-->

    <link rel="stylesheet" type="text/css" href="/assets/login-page/css/util.css">
    <link rel="stylesheet" type="text/css" href="/assets/login-page/css/main.css">
<!--===============================================================================================-->


</head>
<body>

    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img src="/assets/login-page/images/img-01.png" alt="IMG">
                </div>

                <form class="login100-form validate-form">
                    <span class="login100-form-title">
                        Identifiant Telio Maroc 
                    </span>

                    <div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
                        <input class="input100" type="text" name="email" placeholder="Nom de compte">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate = "Password is required">
                        <input class="input100" type="password" name="pass" placeholder="Password">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">
                            Login
                        </button>
                    </div>

                    <div class="text-center p-t-12">
                        <span class="txt1">
                            Forgot
                        </span>

                        <a class="txt2"  routerLink="/forgotpassword" routerLinkActive="active-link" >
                            Username / Password?

                        </a>


                    </div>

                    <div class="text-center p-t-136">
                        <a class="txt2" href="#">
                            Create your Account
                            <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>




<!--===============================================================================================-->  
    <script src="/assets/login-page/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="/assets/login-page/vendor/bootstrap/js/popper.js"></script>
    <script src="/assets/login-page/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="/assets/login-page/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="/assets/login-page/vendor/tilt/tilt.jquery.min.js"></script>
    <script >
        $('.js-tilt').tilt({
            scale: 1.1
        })
    </script>
<!--===============================================================================================-->
    <script src="/assets/login-page/js/main.js"></script>



</body>

</html>

这是我的app-routing.module.ts页面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';


const routes: Routes = [

  {path: 'forgotpassword', component: ForgotPasswordComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ForgotPasswordComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的module.ts页面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';


const routes: Routes = [

  {path: 'forgotpassword', component: ForgotPasswordComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ForgotPasswordComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我忘记密码的页面：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.css']
})
export class ForgotPasswordComponent implements OnInit {

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
  }

}

这是我的忘记密码.html页面：

<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Reset Password Form  Responsive Widget Template | Home :: w3layouts</title>
<link href="/assets/forgot-password/css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
<!--element start here-->
<div class="elelment">
    <h2>Reset Password Form</h2>
    <div class="element-main">
        <h1>Forgot Password</h1>
        <p> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.</p>
        <form>
            <input type="text" value="Your e-mail address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your e-mail address';}">
            <input type="submit" value="Reset my Password">
        </form>
    </div>
</div>
<div class="copy-right">
            <p>© 2016 Reset Password Form. All rights reserved | Template by  <a href="http://w3layouts.com/" target="_blank">  W3layouts </a></p>
</div>

<!--element end here-->


</body>
</html>


重置密码表单响应小部件模板|主页：：w3layouts
重置密码表单
忘记密码
尼莫·埃尼姆·伊普萨姆·沃鲁帕特是一个真正的沃鲁帕特斯
©2016重置密码表。版权所有|模板由

您是否在app.html中插入了（“路由器出口”）标记

从角度文档：

“将路由添加到应用程序中

现在已经定义了路由，可以将它们添加到应用程序中。

更新您的组件模板以包括。此元素通知Angular使用所选路由的组件更新应用程序视图。“

否，因为当我添加路由器出口时，它会在我的登录页面内显示我忘记的密码页面：/（我是Angular的初学者，因此如果我犯了错误，请您更正：D）您需要一个路由器出口来在组件之间导航，尝试创建一个登录页面，并将密码页面作为不同的组件忽略。请参阅：-我创建了两个组件，一个用于登录，一个用于忘记密码。每个组件都有一个html页面。当我单击按钮时，我想从登录页面转到忘记密码页面，这是不可能的吗？为什么您的组件文件中有元素（例如

meta

，

title

，

link

）仅在文档的

头元素中表示？