Question

我已经制作了app-routing.module.ts

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

import { FeaturesComponent } from './components/features/features.component';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'features', component: FeaturesComponent }
]

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

我的app.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 { HeaderComponent } from './components/header/header.component';
import { ContentComponent } from './components/content/content.component';
import { FooterComponent } from './components/footer/footer.component';
import { NavigationComponent } from './components/navigation/navigation.component';

import { FeaturesComponent } from './components/features/features.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavigationComponent,
    ContentComponent,
    FooterComponent,
    HomeComponent,
    FeaturesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app模板

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

            </router-outlet>
        </content-root>
        <footer-root></footer-root>
    </div>

问题是我的应用程序没有渲染任何路由，我看到我的页眉和页脚组件，但内容组件没有填充HomeComponent或FeaturesComponent ..

我正在使用带有routerLink属性的标签进行导航。我已尝试在浏览器中使用主题标签进行导航，但没有，似乎没有任何工作。

我想知道我在这里做错了什么..

Answer 1

对于您要实现的目标，<router-outlet></router-outlet>需要实际位于<content-root>的模板中，我不相信您可以按照您的方式包装组件。

角度路由 - 它不起作用，我做错了什么？

1 个答案: