在Angular 2＆＃39; router-outlet＆＃39;不是一个已知的元素

Question

我看到一个类似的问题，关于＆＃39; router-outlet＆＃39;在Stack Overflow中但是响应并没有帮助我。

这些是我的模块，他们在Webclipse中没有给出任何错误

nav.component.ts

import { RoutingModule } from '../routing/routing.module';
import { Component, OnInit } from '@angular/core';
import {NgModule} from '@angular/core';

@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})

@NgModule ({
imports: [
    RoutingModule,
]
})
export class NavComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

nav.component.html：

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
  <ul class="nav nav-tabs">
    <li>
      <a routerLink="/">Home</a>
    </li>
    <li>
      <a routerLink="services">Services</a>
    </li>
  </ul>
  </div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
  <router-outlet></router-outlet>
</div>
</div>
</div>

routing.module.ts：

import { ChservicesComponent } from '../chservices/chservices.component';
import { HomeComponent } from '../home/home.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'services', component: ChservicesComponent},
];

@NgModule({
imports: [
 RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class RoutingModule { }

启动模块app.component.html：

 <app-nav></app-nav>

Answer 1

您似乎忽略了基本设置的重点。 @NgModule和@Component是不同的东西，也是应用程序结构的构建块。

@NgModule是＆＃34;组织＆＃34;块。它的目的是在分组的事物之间共享资源。因此，一般来说，这是允许您使用declarations允许其他组件使用其他组件的原因。

另一个是imports数组，唯一有效的东西本身必须是@NgModule。来自imports的任何内容同样＆＃34;导出＆＃34;通过它自己的exports数组属性（例如其他组件）。

这是基本原则，而<router-outlet>只是另一个@Component，恰好存在于exports的{​​{1}}属性中。

所以，无论你有什么组织，RouterModule必须是一个＆＃34;本地化的出口＆＃34;封装当前组件的当前RouterModule范围。听起来很满口，但实际上很简单：

最基本设置

<强> app.module.ts

@NgModule

应用-routing.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'


import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { NavComponent } from './nav.component';

@NgModule({
  declarations: [
    AppComponent,             // nav is used from app
    NavComponent,              // router-outlet used in here
    // Any additional local components
  ],
  imports: [
    BrowserModule,
    AppRoutingModule          // router-outlet imported
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

功能模块设置

大致相同，但要注意变化：

<强> app.module.ts

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

// any additional component imports

const routes: Routes = [
   // route declarations and component mounts
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]            // router-outlet exported
})
export class AppRoutingModule { }

应用-routing.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'


import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { NavComponent } from './nav.component';
import { FeatureModule } from './feature.module'

@NgModule({
  declarations: [
    AppComponent,             // nav is used from app
    NavComponent,             // router-outlet used in here
    // Any additional local components
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,         // router-outlet imported
    FeatureModule             // <-- Import only for "static" load and not "lazy"
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<强> feature.module.ts

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

// any additional component imports

const routes: Routes = [
   // route declarations and component mounts
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]            // router-outlet exported
})
export class AppRoutingModule { }

<强>特征routing.module

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

import { FeatureComponent } from './feature.component';
import { FeatureRoutingModule } from './feature-routing.module';

@NgModule({
  declarations: [
    FeatureComponent,
    // any components in the feature
  ],        
  imports: [
    CommonModule,
    FeatureRoutingModule    // <-- each feature "should" control it's own routes
  ]
})
export class FeatureModule { }

这些基本上代表了您的用例，其他所有内容都略有不同。但是你一般都遵循这个结构，那么你就不会出错。