Question

的index.html

<body><router-outlet><p>loading...</p></router-outlet></body>

我正在尝试将应用程序加载到index.html的路由器插座中。

APP-routing.module.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>

该页面显示＆＃34; loading ...＆＃34;来自index.html的消息但不加载应用程序。我在浏览器控制台中收到以下错误。

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)

Answer 1

使用router-outlet作为选择器是错误的，将选择器更改为其他名称：你可以创建应用程序组件（你将在模块中引导的组件）使用像“app-root”这样的选择器

@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>

router-outlet将根据routes.ts。中的路由提供组件。

{ path: 'home', component: HomeComponent},
{ path: 'dashboard', component: DashoardComponent }

angular2 - 将app加载到路由器中 - 即使用index.html上的router-outlet

1 个答案: