Angular 4基本路由

Question

我正在尝试为不同的网址显示不同的htmls。当用户键入基本网址时，他应该看到maincomponent.html，当应用程序识别出还有其他/admin子路径时，它应该显示admin.html。两者都是模块。据我所知，路线使它成为可能。我怎样才能做到这一点？

app.module.ts：

    import { AppComponent } from './app.component';
    import { NgModule } from '@angular/core';

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

    import { AdminModule } from './Admin/admin.module';
    import { MainpageModule } from './Mainpage/mainpage.module';


    const appRoutes: Routes = [
      {path: 'admin', component: AdminModule},
      {path: '', component: MainpageModule}
    ];

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        MainpageModule,
        AdminModule,
        BrowserModule,
        RouterModule.forRoot(
          appRoutes, {enableTracing: true}
        )
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

mainpage.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import {MainpageComponent} from './mainpage.component'

    import { HeaderComponent } from './Header/header.component';
    import { FooterComponent } from './Footer/footer.component';
    import { SidebarComponent } from './Sidebar/sidebar.component';
    import { BottompanelComponent } from './Bottompanel/bottompanel.component'
    import { CarouselComponent } from './Carousel/carousel.component'

    @NgModule({
      declarations: [
        MainpageComponent,
        HeaderComponent,
        FooterComponent,
        SidebarComponent,
        BottompanelComponent,
        CarouselComponent
      ],
      imports: [CommonModule],
      entryComponents: [MainpageComponent],
      exports: [MainpageComponent],
      providers: [],
      bootstrap: []
    })

    export class MainpageModule {}

admin.module.ts：

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

import {AdminComponent} from './admin.component'

@NgModule({
  declarations: [
    AdminComponent,
  ],
  imports: [CommonModule],
  exports: [AdminComponent],
  providers: [],
  bootstrap: []
})

export class AdminModule {}

然而它不起作用，我看不到任何东西，只是空白网站。这是我的日志输出：

Router Event: NavigationStart
platform-browser.js:367 NavigationStart(id: 1, url: '/')
platform-browser.js:367 NavigationStart {id: 1, url: "/"}
core.js:3687 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
platform-browser.js:380 Router Event: RoutesRecognized
platform-browser.js:367 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:367 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.js:380 Router Event: GuardsCheckStart
platform-browser.js:367 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:367 GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ChildActivationStart
platform-browser.js:367 ChildActivationStart(path: '')
platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ActivationStart
platform-browser.js:367 ActivationStart(path: '')
platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: GuardsCheckEnd
platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true)
platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:380 Router Event: ResolveStart
platform-browser.js:367 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:367 ResolveStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ResolveEnd
platform-browser.js:367 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:367 ResolveEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
platform-browser.js:380 Router Event: ActivationEnd
platform-browser.js:367 ActivationEnd(path: '')
platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: ChildActivationEnd
platform-browser.js:367 ChildActivationEnd(path: '')
platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:380 Router Event: NavigationEnd
platform-browser.js:367 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
platform-browser.js:367 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

编辑：根据答案，我编辑了app.module.ts并将<router-outlet></router-outlet>添加到了app.component.html。

app.module.ts：

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

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

import { AdminComponent } from './Admin/admin.component';
import { MainpageComponent } from './Mainpage/mainpage.component';


const appRoutes: Routes = [
  {path: 'admin', component: AdminComponent},
  {path: '', component: MainpageComponent}
];

@NgModule({
  declarations: [
    MainpageComponent,
    AdminComponent,
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes, {enableTracing: true}
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在我看到了这些错误：

compiler.js:485 Uncaught Error: Template parse errors:
'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-header></app-header>
  <div class="container">
    <div class="row">
"): ng:///AppModule/MainpageComponent.html@0:0
'app-sidebar' is not a known element:
1. If 'app-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <div class="row">
      <div class="col-lg-3">
          [ERROR ->]<app-sidebar></app-sidebar>
      </div>
      <div class="col-lg-9">
"): ng:///AppModule/MainpageComponent.html@4:10
'app-carousel' is not a known element:
1. If 'app-carousel' is an Angular component, then verify that it is part of this module.
2. If 'app-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      </div>
      <div class="col-lg-9">
        [ERROR ->]<app-carousel></app-carousel>
        <app-bottompanel></app-bottompanel>
      </div>
"): ng:///AppModule/MainpageComponent.html@7:8
'app-bottompanel' is not a known element:
1. If 'app-bottompanel' is an Angular component, then verify that it is part of this module.
2. If 'app-bottompanel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      <div class="col-lg-9">
        <app-carousel></app-carousel>
        [ERROR ->]<app-bottompanel></app-bottompanel>
      </div>
    </div>
"): ng:///AppModule/MainpageComponent.html@8:8
'app-footer' is not a known element:
1. If 'app-footer' is an Angular component, then verify that it is part of this module.
2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>
  </div>
[ERROR ->]<app-footer></app-footer>
"): ng:///AppModule/MainpageComponent.html@12:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

这就是我的结构：

Answer 1

除非您正在进行延迟加载，否则您的路由定义必须指向组件，而不是模块。

const appRoutes: Routes = [
  {path: 'admin', component: AdminComponent},
  {path: '', component: MainpageComponent }
];

还要确保app.component.html

中有<router-outlet></router-outlet>

Answer 2

了解google指南中的路由，它首先需要了解您需要了解的完整内容： https://angular.io/guide/router

Answer 3

好的，我找到了解决方案。问题是我在app.module.ts中不声明了组件，在子模块中我们也可以删除这些声明。最后它应该看起来：

app.module.ts：

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

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

import { AdminComponent } from './Admin/admin.component';
import { MainpageComponent } from './Mainpage/mainpage.component';

import { HeaderComponent } from './mainpage/header/header.component'
import { FooterComponent } from './mainpage/footer/footer.component';
import { SidebarComponent } from './mainpage/sidebar/sidebar.component';
import { BottompanelComponent } from './mainpage/bottompanel/bottompanel.component'
import { CarouselComponent } from './mainpage/carousel/carousel.component'

const appRoutes: Routes = [
  { path: 'admin', component: AdminComponent },
  { path: 'home', component: MainpageComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  declarations: [
    MainpageComponent,
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
    BottompanelComponent,
    CarouselComponent,
    AdminComponent,
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes, { enableTracing: true }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

mainpage.module.ts：

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

import {MainpageComponent} from './mainpage.component'


 @NgModule({
  declarations: [
    MainpageComponent
  ],
  imports: [BrowserModule],
  exports: [MainpageComponent],
  providers: [],
  bootstrap: []
})

export class MainpageModule {}

admin.module.ts：

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

import {AdminComponent} from './admin.component'

@NgModule({
  declarations: [
    AdminComponent,
  ],
  imports: [CommonModule],
  exports: [AdminComponent],
  providers: [],
  bootstrap: []
})

export class AdminModule {}

感谢您的帮助:)