在角度4中路由不适用于子组件

Question

我正在我的routing应用中实施angular。我创建了一个 moviecomponent ， editmoviecomponent 。

editmoviecomponent 嵌套在 moviecomponent 中，如下面的文件夹结构所示。

moviecomponent.html有一个网格，其中包含指向editmoviecomponent的routerlink。我可以看到浏览器地址栏中看起来正确的链接，但由于某种原因，endmoviecomponent.html没有得到渲染。而是呈现NotFound页面，该页面也在路线中定义。似乎approuting.module中的路由定义不正确。

movie.component.html

<kendo-grid-column title="Edit" headerClass="kendoGridHeader" class="kendoGridControlCell">
    <ng-template kendoGridCellTemplate let-dataItem>
       <span data-title="Edit" [hidden]="!dataItem.isVisibleEdit">
         <a [routerLink]="['./edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a>
       </span>
     </ng-template>
</kendo-grid-column>

movie.component

import {Component, OnInit} from '@angular/core';
import {MovieService} from './movie.service';
import {IMovie} from './movie.interface';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { MRDBGlobalConstants } from '../shared/mrdb.global.constants';

@Component({
  moduleId: module.id,
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css'],
  providers:[MovieService]
})

editmovie.component.html

<p>
  editmovie works!
</p>

editmovie.component

import { Component, OnInit } from '@angular/core';
import {Router,ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-editmovie',
   moduleId: module.id,
  templateUrl: './editmovie.component.html',
  styleUrls: ['./editmovie.component.css']
})
export class EditmovieComponent implements OnInit {

public selectMovieId: number = 0;
public sub : any;

  constructor(private _route: ActivatedRoute) {

    this.sub = this._route.params.subscribe(params => {
      this.selectMovieId = + params['id']; // (+) converts string to number
    }) 
   }

  ngOnInit() {
  }

}

approuting.module

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent}  from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';

import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';
import {ViewmovieComponent} from './movie/view/viewmovie.component';

export const routes: Routes = [
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit/:id' , component : EditmovieComponent },
{path : 'view/:id' , component : ViewmovieComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{path : '', component : HomeComponent},
{path: '**', component : NotFoundComponent}

];

@NgModule({
     imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

export class AppRoutingModule{}

有人可以告诉我问题是什么吗？

Answer 1

这应该有效：

{path : 'movie/edit/:id' , component : EditmovieComponent }

或：

 {
    path: 'movie', component : MovieComponent , children : [
        {path : 'edit/:id' , component : EditmovieComponent }
    ]
 }

Answer 2

试试这个：

@NgModule({
  declarations: [
        EditmovieComponent
    ],
   imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

您需要导入组件父模块或声明路由模块中的组件

Answer 3

为什么你在这里使用相对路径'./edit'它应该是绝对的：

 <a [routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a>

如果您想使用子路线，则必须添加

 <router-outlet></router-outlet> 

在你的movie.component.html

中

{
path: 'movie', component : MovieComponent , children : [
    {path : 'edit/:id' , component : EditmovieComponent }
]}

和电影组件

  <kendo-grid-column title="Edit" headerClass="kendoGridHeader" class="kendoGridControlCell">
    <ng-template kendoGridCellTemplate let-dataItem>
     <span data-title="Edit" [hidden]="!dataItem.isVisibleEdit">
       <a [routerLink]="['./edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a>
   </span>
  </ng-template>
 </kendo-grid-column>
 <router-outlet></router-outlet>