Question

我是js 2初学者。我正在尝试登录页面并点击＆＃34;登录＆＃34;按钮页面应导航到下一页。单击按钮时，我试图显示警报及其工作情况。但我尝试导航它显示错误为＆＃34; app.component.ts（18,1）：找不到名称＆＃39; navigateUrl＆＃39;。＆＃34;我想知道代码导致错误的位置。

代码：

＆＃13;

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl:'app.component.html'
})

export class AppComponent {

hello ={username:'yyy',password:'zzz'};
navigateUrl():void{
this.router.navigate(['/lazy.html']);

}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container text-center">
        <h3>Login</h3>
        <div class="row">
            <div class="col-md-12">
                <input class="text-center" type="text" placeholder="Username" />
            </div>
        </div>
        <div class="row margin-t-20">
            <div class="col-md-12">
                <input class="text-center" type="password" placeholder="Password" />
            </div>
        </div>
		 <div class="row margin-t-20">
				<input class="btn-primary text-center " type="button" (click)="navigateUrl()" value="Sign in" />
		</div>
        </div>

＆＃13;

Answer 1

创建＆＃39;路由器＆＃39;的实例。在构造函数中。还要从路由文件this.router.navigate（[＆lt; path_from_routing_file ＆gt;]）函数中添加组件路径。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl:'app.component.html'
})

export class AppComponent {
constructor(private router: Router) {
}
hello ={username:'yyy',password:'zzz'};
navigateUrl() {
this.router.navigate(['/lazy']);

}
}

使用Angular Js 2中的按钮单击功能进行路由

1 个答案: