angular2 - 私はindex.htmlをで、ルータ、コンセントにアプリケーションをロードしようとしていますルータoutetすなわちindex.htmlを

index.htmlをangular2 - 私はindex.htmlをで、ルータ、コンセントにアプリケーションをロードしようとしていますルータoutetすなわちindex.htmlを

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

にルータ-コンセントを使用してにロードするアプリ。

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を使用すると間違っています =>もしそうなら、セレクタの提供方法を教えてください。私はcomponent.tsにセレクタ： '[home_modules]'を、htmlにはを、routing.module.tsには "home_modules"私は別の画面を読み込むことができません。 –

複数のコンポーネントに同じセレクタ名を付けることはできません。だから、私はこれをどのように達成するのですか？htmlとセレクタの：同じルータ・コンセントにロードされる2つのコンポーネントで '[home_modules]'が指定されている場合、指定された要素に一致するコンポーネントのセレクタが1つだけであることを確認してください。 " –

私は答えを更新した、あなたはそれが仲間を確認します –

angular2 - 私はindex.htmlをで、ルータ、コンセントにアプリケーションをロードしようとしていますルータoutetすなわちindex.htmlを

答えて

関連する問題