Question

我尝试使用angular-cli（＆＃34;嵌套路由＆＃34;来自ng2-book）在Angular2中创建带子路径的简单应用程序。我有两个模块：

app.module - 包含导航和主页的整个应用模块
products.module - ＆＃34;儿童＆＃34;具有不同＆＃34;页面的模块＆＃34;在不同的路线下

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>")

因此Angular不会识别 products.component.html 中RouterModule的 routed-outlet 组件。谷歌搜索什么都没有，因为常见的问题是RouterModule不是ProductsComponentModule的一部分，但我已经包含了它的导入部分。我该如何解决这个问题？

Answer 1

使用：

<router-outlet></router-outlet>

您收到错误，因为您输了一个拼写错误：

<routed-outlet></routed-outlet>

Answer 2

在 app.component.html 文件中，使用以下内容进行更改::: ---

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

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

＆＃39;路由出口＆＃39;不是Angular2 Routes

2 个答案: