2016-07-27 12 views
0

私は.netコアアプリケーションで作業していましたが、現在はangle2をプロジェクトに追加しようとしています。なぜapp.componentテンプレートページを調べても元のコンテンツが実際にそこにあるにもかかわらず、ページからすべてを削除するように見えます。Angular2 app.componentすべてのコンテンツをページから削除します

var app = angular.module('myApp', []); 

<html ng-app="app">....</html> 

は、私は私のかみそりの見解を放棄することなく、angular2使用することができ、または私がするつもりですとにかくあります:私の理解では、app.componentは以下の通りangular1でないのと同じようにエントリポイントを提供したことでしたすべてのビューをブートストラップする必要がありますか?

答えて

1

角度2では、ブートストラップに使用されるルートコンポーネントが1つ必要です。これはindex.htmlでレンダリングされます。 他のコンポーネント、サービスはmodules.tsにインポートして宣言する必要があります 例:下記のサンプルアプリケーションは、親、アプリケーション、および新しいアプリケーションの3つのコンポーネントを備えています。 modules.tsファイルでは、すべてのコンポーネントをインポートし、NgModule内で宣言する必要があります。その下には、親コンポーネントをブートストラップしています。

Modules.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 

import { ParentComponent } from './parent.component'; 
import { AppComponent } from './app.component'; 
import { NewAppComponent } from './newapp.component'; 

@NgModule({ 
declarations: [ 
ParentComponent, AppComponent, NewAppComponent 
], 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
RouterModule.forRoot([ 
    { path: 'app', component: AppComponent }, 
    { path: 'newapp', component: NewAppComponent } 
],{ useHash: true }) 
], 
providers: [], 
bootstrap: [ParentComponent] 
}) 
export class AppModule { } 

Parent.Component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'parent-root', 
    templateUrl: './parent.component.html' 
}) 
export class ParentComponent { 
} 

Parent.Component.Html

Index.htmlと

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Routingapp</title> 
    <base href="/index.html"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
    <parent-root>Loading...</parent-root> 
</body> 
</html> 

親コンポーネントは、ちょうど(それはあなたのアプリケーションのホーム・ページとみなすことができる)のアプリケーションをブートストラップするために使用されます。 すべてのビュー/コンポーネントをブートストラップする必要はありません。

関連する問題