Angular2、何が間違っているのですか？

debugcn 投稿 Dev

ArkadyB

私はAngular2フレームワークを学んでいて、途中で立ち往生しています。目標-目的のコンポーネント（ホーム）からビューをロードするシンプルなアプリ。

これが私が持っているものです：

app / app.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app / app.module.ts

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

import { AppComponent }         from './app.component';
import { HomeComponent }        from './home/home.component';
import { DemoService }          from './services/demo.service';
import { routing }              from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  providers: [
    DemoService,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

app / app.component.ts

import {Component} from '@angular/core';
import {DemoService} from './services/demo.service';
import {HomeComponent} from './home/home.component';
import {routing,
         appRoutingProviders} from './app.routing';

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  providers: [DemoService]
})

export class AppComponent {}

/app/app.component.html

<div>AppComponent</div>

../index.html

<!DOCTYPE html>
<html>
  <body>
    <app>Loading...</app>
  </body>
</html>

app / home / home.component.ts

import {Component, OnInit} from '@angular/core';
import {DemoService} from '../services/demo.service';

@Component({
  selector: 'home',
  template: require('./home.component.html')
})
export class HomeComponent implements OnInit {
  title: string = 'Home Page';
  body:  string = 'This is the about home body';
  message: string;

  constructor(private _stateService: DemoService) { }

  ngOnInit() {
    this.message = this._stateService.getMessage();
  }

  updateMessage(m: string): void {
    this._stateService.setMessage(m);
  }
}

app / app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent }      from './home/home.component';

const appRoutes: Routes = [
  {
    path: '/',
    component: HomeComponent
  }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app / home / home.component.html

<div>HomeComponent</div>

コンポーネントの定義に由来するので、私はそれぞれのDemoSeviceを持っていますが、現時点ではそうではありません。アプリを起動すると、「読み込み中...」が表示され、他に何も変更されません。

正しい道を教えていただけませんか？

パンカイパーカー

のrouter-outlet中にディレクティブを配置する必要がありますapp.component.html。そのディレクティブを追加する理由は、ブラウザのURLを追跡し、Angularルーターが適切なComponent内部router-outletディレクティブをロードするためです。

/app/app.component.html

<div>AppComponent</div>
<router-outlet></router-outlet>

さらに、angular2に関連するさまざまなスクリプトファイルをindex.htmlに配置する必要があります

<head>
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/[email protected]?main=browser"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
    <app>Loading...</app>
</body>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]