angular2 -에로드 응용 프로그램 라우터 - outet 즉 index.html을

내가 index.html을의 라우터 콘센트에 응용 프로그램을로드하려고angular2 -에로드 응용 프로그램 라우터 - outet 즉 index.html을

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

된 index.html에 라우터 콘센트를 사용.

앱 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을 교체 할 필요가 화면을로드해야합니다 (대시 보드보기). 라우터 출력을 선택기로 사용하는 것은 잘못되었습니다. => 그렇다면 선택기를 제공하는 방법을 알려주십시오. 선택기 : component.ts에 selector : '[home_modules]'및 HTML 및 outlet에있는 : routing.module.ts의 'home_modules' 다른 화면을로드 할 수 없습니다. –

여러 구성 요소에 동일한 선택기 이름을 지정할 수는 없습니다. 그래서, 어떻게해야합니까?html의 셀렉터 : 및 셀렉터 : 'home_modules'같은 라우터 콘센트에로드 할 두 구성 요소가 제공되면 오류가 발생합니다. 요소 하나의 구성 요소 선택기가 주어진 요소와 일치 할 수 있는지 확인하십시오. " –

나는 대답을 업데이트했다. –

angular2 -에로드 응용 프로그램 라우터 - outet 즉 index.html을

답변

관련 문제