使用angular2單擊“提交”按鈕時，從一頁導航到另一頁

Question

單擊提交按鈕時，我試圖在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正在顯示帶有名稱的輸入模板，並在我提交它時顯示。 我必須導航到另一個包含一些text（）的頁面。 請解決我的查詢。我過去2天都在嘗試

提前致謝。

Answer 1

更改提交功能，如下所示：

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

Answer 2

使用路由路徑代替名稱：

this.router.navigate（['/ details']）;