Question

所以，我已经在这个主题上做了很多搜索，但我找不到这个bug。当我尝试实现路由器时，我收到错误<router-outlet> is not a known element。

这是我的app-routing.module.ts：

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

import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent},
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

我的app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';


// Declarations
import { RootComponent } from './root/root.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// Imports
import { HttpClientModule } from '@angular/common/http';
import { HttpClientJsonpModule } from '@angular/common/http';
import { DalModule } from './dal/dal.module';
import { RootModule } from './root/root.module';
import { TranslationModule } from './translation/translation.module';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
    declarations: [DashboardComponent],
    imports: [
        DalModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        HttpClientJsonpModule,
        RootModule,
        AppRoutingModule,
        HttpModule,
        RouterModule
    ],
    providers: [],
    bootstrap: [RootComponent]
})
export class AppModule { }

这是我的模板：

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

一切似乎都很好，当我进行搜索时，我似乎完全应该做些什么才能让它发挥作用。

谢谢！

Answer 1

在app.module.ts我猜你的RootComponent是大多数Angular应用中的AppComponent，因为那是你在应用程序根目录引导的组件。

要使用组件，必须先通过声明将其注册到模块。在app.module.ts添加RootComponent到声明数组。

@NgModule({
    declarations: [RootComponent, DashboardComponent],
    imports: [
        DalModule,
        FormsModule,
        BrowserModule,
        HttpClientModule,
        HttpClientJsonpModule,
        RootModule,
        AppRoutingModule,
        HttpModule,
        RouterModule
    ],
    providers: [],
    bootstrap: [RootComponent]
})

Angular 2 - Router-Outlet不是已知元素

1 个答案: