index.html
<body><router-outlet><p>loading...</p></router-outlet></body>
我正在尝试将应用程序加载到index.html.中的路由器出口
应用程序路由模块.ts
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { HeaderComponent }from './home/welcome/header.component';
import { PageNotFoundComponent }from ./home/common/page_not_found.component';
const appRoutes: Routes = [
{
path : 'home',
component : HomeComponent,
children: [
{
path: 'welcome',
component: HeaderComponent,
outlet: 'home_content'
}
]
},
{ path: '', redirectTo: '/home/welcome', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
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 { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './home/welcome/header.component';
import { PageNotFoundComponent } from './home/common/page_not_found.component';
@NgModule({
imports: [ BrowserModule, FormsModule, AppRoutingModule ],
declarations: [ HomeComponent, HeaderComponent, PageNotFoundComponent ],
bootstrap: [ HomeComponent ]
})
export class AppModule { }
home.component.ts
import { Component } from '@angular/core';
@Component({
selector: '[router-outlet]',
templateUrl: './home.html'
})
export class HomeComponent { }
home.html
<p>This is Home-HTML</p>
<router-outlet name="home_content"></router-outlet>
header.component.ts
import { Component } from '@angular/core';
@Component({
selector: '[router-outlet]',
templateUrl: './header_view.html',
})
export class HeaderComponent {
welcome_message = "Hello there...";
}
header_view.html
<p>This is Header_View-HTML</p>
该页面显示来自index.html的"loading…"消息，但不加载应用程序。我在浏览器控制台中收到以下错误。
HomeComponent_Host.html:1 ERROR Error: The selector "[router-outlet]" did not match any elements
at DefaultDomRenderer2.selectRootElement (dom_renderer.ts:234)
at DebugRenderer2.selectRootElement (services.ts:984)
at createElement (element.ts:199)
at createViewNodes (view.ts:307)
at createRootView (view.ts:225)
at callWithDebugContext (services.ts:815)
at Object.debugCreateRootView [as createRootView] (services.ts:140)
at ComponentFactory_.create (refs.ts:130)
at ComponentFactoryBoundToModule.create (component_factory_resolver.ts:112)
at ApplicationRef_.bootstrap (application_ref.ts:670)
使用路由器出口作为选择器是错误的，请将您的选择器更改为其他名称：您可以使用类似"应用程序根"的选择器创建应用程序组件(您将在模块中引导的组件)
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
你的index.html会是这样的：
...<body>
<app-root></app-root>
</body>...
然后你可以在你的app.component.html中添加如下：
<div>
<router-outlet></router-outlet>
</div>
路由器出口将根据您的路由内的路由为组件提供服务。ts.
{ path: 'home', component: HomeComponent},
{ path: 'dashboard', component: DashoardComponent }