Angular 4个基本路由
Angular 4 basic routing
我正在尝试为不同的 url 显示不同的 html。当用户键入基本 url 时，他应该看到 maincomponent.html，当应用程序识别出有额外的 /admin 子路径时，它应该显示 admin.html。两者都是模块。据我所知，Routes 使之成为可能。我怎样才能做到这一点？
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)
我的结构是这样的：
除非你在进行延迟加载，否则你的路由定义必须指向组件，而不是模块。
const appRoutes: Routes = [
{path: 'admin', component: AdminComponent},
{path: '', component: MainpageComponent }
];
还要确保你有 <router-outlet></router-outlet> app.component.html
在 google 指南中阅读有关路由的信息，其中包含您首先需要了解的漂亮、完整的内容：
https://angular.io/guide/router
好的，我找到了解决方案。问题是我 not 在 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 {}
感谢你们的帮助:)
我正在尝试为不同的 url 显示不同的 html。当用户键入基本 url 时，他应该看到 maincomponent.html，当应用程序识别出有额外的 /admin 子路径时，它应该显示 admin.html。两者都是模块。据我所知，Routes 使之成为可能。我怎样才能做到这一点？
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)
我的结构是这样的：
除非你在进行延迟加载，否则你的路由定义必须指向组件，而不是模块。
const appRoutes: Routes = [
{path: 'admin', component: AdminComponent},
{path: '', component: MainpageComponent }
];
还要确保你有 <router-outlet></router-outlet> app.component.html
在 google 指南中阅读有关路由的信息，其中包含您首先需要了解的漂亮、完整的内容： https://angular.io/guide/router
好的，我找到了解决方案。问题是我 not 在 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 {}
感谢你们的帮助:)