javascript - 使用 angular2 单击提交按钮时从一个页面导航到另一页面

标签 javascript angular

当单击提交按钮时,我试图在 angularjs2 中从一个页面导航到另一个页面。我尝试使用导航栏进行导航,但当我尝试在单击按钮时实现时它不起作用?

这是我的代码

app.component.ts

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']);
  }}

details.component.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'details',
  template: `<h1>In the second page of details form`

})

export class DetailsComponent{

}

这是我的两个组件,第一个组件是 Appcomponent,它显示带有名称的输入模板以及何时提交它。我必须导航到另一个包含一些文本()的页面。我只是要导航它。请解决我的问题。过去 2 天我一直在尝试这个

提前致谢。

最佳答案

按如下方式更改您的提交功能:

clickName(name){
    console.log('in the clickName' + Name);
    this.router.navigate(['details/']);    // pass route in the navigate function instead of Component Name
  }}

关于javascript - 使用 angular2 单击提交按钮时从一个页面导航到另一页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38889623/

相关文章:

angular - 在 'ɵcmf' 中找不到导出 '@angular/core'

javascript - 如何使我的 Firestore 搜索可重复?

所有 child 都初始化后的 Angular 生命周期钩子(Hook)?

javascript - JS 函数创建并插入数组 - 只有第一个元素是 NaN

javascript - 运行速度快的 Javascript 中的 setInterval

javascript - React.js 新手无法确定正确的 Typescript 接口(interface)

javascript - Material-UI [Select] - 如何在外部点击时移除焦点?

javascript - Accordion 代码无法正常工作,如何解决?

Angular 将 FormGroup 添加到 FormGroup

javascript - 传递类引用的 Angular 范围问题中的 Highcharts