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

回答

相關問題