如何从一个组件导航到另一个组件

Question

我在这里使用 angular2 我在 EmployeeModule 中注册 EditEmployeeByIdComponent 当用户点击 URL 它应该将我重定向到那个组件

EditEmployeeByIdComponent

import { Component } from "@angular/core"
@Component({
    templateUrl:'../../ui/employee/EditEmployee.html'
})
export class EditEmployeeByIdComponent {
}

我在 EmployeeModule 中注册了 EditEmployeeByIdComponent

@NgModule({
    imports: [RouterModule.forChild(EmployeeRoute), FormsModule, CommonModule, HttpModule],
    declarations: [EmployeeComponent, EditEmployeeByIdComponent],
    bootstrap: [EmployeeComponent],
    providers: [EmployeeService]
})

export class EmployeeModule {
}

我正在打电话

<tr *ngFor="let emp of employee">
    <a (click)="GetById(emp.Emp_Id)"> {{emp.EmpName}} </a>
</tr>


 GetById(Id:number) {
    this._router.navigate(['../editemployeebyidcomponent'], {})            
}

Answer 1

你必须在你的父组件中提供路由器插座，所以允许 angular 在它上面渲染子组件所以在你的例子中你必须声明一个父组件让我们说 Employee.component.ts 它是等效的模板 Employee.component.html 和里面 .html 写那个指令不要忘记在你的 EmployeeModule

const  employeeRoutes: Routes = [
  {path : 'employee', component: EmployeeComponent,children: [
    {path : 'editemployeebyidcomponent', component: EditEmployeeByIdComponent},
    ];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(employeeRoutes)
  ],
  declarations: [
    EmployeeComponent,EditEmployeeByIdComponent
  ],
  exports :[RouterModule]
})
export class EmployeeModule { }

employee.component.html

<router-outlet></router-outlet>

app.module.ts

const  appRouts: Routes = [
  {path: 'employee' , component: EmployeeComponent}
];

@NgModule({
  imports: [ 
    BrowserModule,
    RouterModule.forRoot(appRouts),
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

你在父组件中的导航路径应该是这样的

 GetById(Id:number) {
        this._router.navigate(['../editemployeebyidcomponent'],{relativeTo: this.currentActivatedRoute})

}

要么将路由设为绝对路径

 GetById(Id:number) {
        this._router.navigate(['/editemployeebyidcomponent'])

}

如何从一个组件导航到另一个组件

How to navigate form one component to another component

angular2-routing