'routed-outlet'不是Angular2 Routes中的已知元素

Question

我正在尝试使用angular-cli(来自ng2-book的"Nested Routes")在Angular2中创建带子路径的简单应用程序.我有两个模块:

1. app.module - 带导航和主页的整个应用程序模块
2. products.module - "children"模块,在不同的路径下有不同的"页面"

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductsComponent } from './products/products.component';
import { ProductsComponentModule, routes as childRoutes } from './products/products.module'
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent, children: childRoutes }
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    ProductsComponentModule
  ],
  bootstrap: [ AppComponent ],
  providers: []
})
export class AppModule { }

app.component

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private router: Router) { }
}

app.component.html

<div class="page-header">
  <div class="container">
    <h1>Router Sample</h1>
    <div class="navLinks">
      <a [routedLink]="['/home']">Home</a>
      <a [routedLink]="['/products']">Products</a>
    </div>
  </div>
</div>

<div id="content">
  <div class="container">
    <routed-outlet></routed-outlet>
  </div>
</div>

products.module

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { ProductsComponent } from './products.component';
import { MainComponent } from '../main/main.component';
import { ByIdComponent } from '../by-id/by-id.component';
import { InterestComponent } from '../interest/interest.component';
import { SportifyComponent } from '../sportify/sportify.component';


export const routes: Routes = [
  { path: '', redirectTo: 'main' },
  { path: 'main', component: MainComponent },
  { path: ':id', component: ByIdComponent },
  { path: 'interest', component: InterestComponent },
  { path: 'sportify', component: SportifyComponent },
];

@NgModule({
  declarations: [
    ProductsComponent,
    MainComponent,
    InterestComponent,
    SportifyComponent,
    ByIdComponent
  ],
  exports: [
    ProductsComponent,
    MainComponent,
    InterestComponent,
    SportifyComponent,
    ByIdComponent
  ],
  imports: [ RouterModule ]
})
export class ProductsComponentModule { }

products.component

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

import { MainComponent } from '../main/main.component';
import { ByIdComponent } from '../by-id/by-id.component';
import { InterestComponent } from '../interest/interest.component';
import { SportifyComponent } from '../sportify/sportify.component';


@Component({
  selector: 'products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {

  constructor(private router: Router, private route: ActivatedRoute) { }

  goToProduct(id: string): void {
    this.router.navigate(['./', id], { relativeTo: this.route });
  }
}

products.component.html

<h2>Products</h2>

<div class="navLinks">
  <a [routerLink]="['./main']">Main</a> |
  <a [routerLink]="['./interest']">Interest</a> |
  <a [routerLink]="['./sportify']">Sportify</a>
  Enter id: <input #id size="6">
  <button (click)="goToProduct(id.value)">Go</button>
</div>

<div class="products-area">
  <routed-outlet></routed-outlet>
</div>

其他组件是简单的组件,在模板中没有占位符文本,也没有逻辑.当我尝试运行它时,我收到错误:

Unhandled Promise rejection: Template parse errors: 'routed-outlet' is not a known element:
    1. If 'routed-outlet' is an Angular component, then verify that it is part of this module.
    2. If 'routed-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
("<div class="products-area">   [ERROR->]<routed-outlet></routed-outlet> </div>")

所以角度不承认路由出口从RouterModule组件products.component.html.谷歌搜索什么都没有,因为常见的问题是RouterModule不是ProductsComponentModule的一部分,但我已经包含了它的导入部分.我怎样才能解决这个问题？

Answer 1

使用 :

<router-outlet></router-outlet>

你得到一个错误,因为你写错了:

<routed-outlet></routed-outlet>