[英]Navigate from one page to another page when submit button is clicked using angular2
i am trying to navigate from one page to another in angularjs2 when submit button is clicked. 单击提交按钮时,我试图在angularjs2中从一页导航到另一页。 i tried in navigating using navbars but it is not working when i tried to implement when button clicked?
我尝试使用导航栏进行导航,但是当我尝试实现单击按钮时是否无法正常工作?
import { Component } from 'angular2/core';
import { DetailsComponent } from './details.component';
import { Router,RouteConfig } from 'angular2/router';
@Component({
selector: 'my-app',
template: `<div>
<input type="text" [(ngModel)]="myName" (keyup.enter)="myName='' placeholder="enter ur Name" >
<input type="submit" class="btn" value="Continue" (click)="clickName(Name); Name=''" >
</div>`,
directives:[DetailsComponent]
})
@RouteConfig([
{ path: '/details', component: DetailsComponent, name: 'Details' }
])
export class AppComponent {
constructor(private router:Router){
}
clickName(name){
console.log('in the clickName' + Name);
this.router.navigate(['Details']);
}}
import {Component} from 'angular2/core';
@Component({
selector: 'details',
template: `<h1>In the second page of details form`
})
export class DetailsComponent{
}
these are my two components first component is Appcomponent is displaying the template of input that takes a name and when i submit it. 这是我的两个组件,第一个组件是Appcomponent正在显示带有名称的输入模板,并在我提交它时显示。 i have to navigate in to an another page which contains some text().i just what to navigate it.
我必须导航到另一个包含一些text()的页面。 please solve my query.i am trying this from the past 2 days
请解决我的查询。我过去2天都在尝试
thanks in advance. 提前致谢。
Change your submit function as follows : 更改提交功能,如下所示:
clickName(name){
console.log('in the clickName' + Name);
this.router.navigate(['details/']); // pass route in the navigate function instead of Component Name
}}
use the routes path instead of the name: 使用路由路径代替名称:
this.router.navigate(['/details']); this.router.navigate(['/ details']);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.