angular2 - 加载应用到路由器outet即，使用上的index.html

的index.htmlangular2 - 加载应用到路由器outet即，使用上的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>

的页面显示 “正在加载...” 从消息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)

来源

2017-10-28 Jayaraj PS

是错误的使用路由器出口的选择，你的选择切换到其他的名字：您可以创建应用程序组件（你将你的模块在引导部件）使用选择像“应用程序根“

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

来源

2017-10-28 21:58:06

我需要加载一个屏幕（比如，主视图）成index.html，然后在用户登录后，一旦路由器出口，我需要另一个完全取代整个HTML代替主视图的（比如仪表板视图）。使用router-outlet作为选择器是错误的 =>如果是这样，请告诉我如何提供选择器。我在html和outlet中提供：selector ['home_modules]'中的component.ts和：routing.module.ts中的'home_modules'，但随后我无法加载不同的屏幕。 –

我相信，我们不能给相同的选择器名称多个组件。那么，我该如何做到这一点。在html和选择器中的：当在两个要装载在同一个router-outlet中的组件提供'[home_modules]'时，发生错误：“在这个上匹配多个组件元素确保只有一个组件的选择器可以匹配给定的元素。“ –

我更新了答案，你检查它 –

angular2 - 加载应用到路由器outet即，使用上的index.html

回答

相关问题