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

Question

我在我的angular 中为应用程序实现routing。我创建了一个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

试试这个：

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

})

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

Answer 2

这应该有效：

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

或：

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

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>