Angular2，我在做什么错？

Question

Im learning Angular2 framework, and just stuck in middle. 我正在学习Angular2框架，只是处于中间。 Goal - simple app that loading view from desired component (Home). 目标-简单的应用程序，可从所需组件（主页）加载视图。

Here is what i have: 这是我所拥有的：

app/app.ts app / app.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

app/app.module.ts 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 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 /app/app.component.html

<div>AppComponent</div>

../index.html ../index.html

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

app/home/home.component.ts 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 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 app / home / home.component.html

<div>HomeComponent</div>

As its coming from the components definitions, i have respective DemoSevice, that does nothin at the moment. 由于它来自组件定义，因此我有各自的DemoSevice，目前没有。 Having app started i get "Loading..." and nothing else changes. 启动应用程序后，我得到“正在加载...”，其他都没有改变。

Could you please suggest me correct path? 您能建议我正确的路径吗？

Answer 1

You should have router-outlet directive placed inside your app.component.html . 您应该在app.component.html放置router-outlet指令。 The reason behind adding that directive is, it will keep track browser URL & Angular router will load appropriate Component inside router-outlet directive 添加该指令的原因是，它将保持跟踪浏览器URL，并且Angular路由器将在router-outlet指令内加载适当的Component

/app/app.component.html /app/app.component.html

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

Additionally you have to put various script file related to angular2 on index.html 另外，您必须将与angular2相关的各种脚本文件放在index.html上

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

    <script src="https://unpkg.com/zone.js@0.6.17?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/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>

Answer 2

1) You need to change template: require('./app.component.html') to templateUrl:'app/app.component.html' . 1）您需要将template: require('./app.component.html')更改为templateUrl:'app/app.component.html' 。

2)try to change it to 2）尝试将其更改为

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

3) app/app.componet.html 3） app / app.componet.html

<div>AppComponent</div>
<router-outlet></router-outlet>  //<----added here..

Angular2，我在做什么错？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-09-11 09:09:25

解决方案2
0 2016-09-11 09:11:00

Angular2，我在做什么错？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-09-11 09:09:25

解决方案2 0 2016-09-11 09:11:00

解决方案1
1 已采纳 2016-09-11 09:09:25

解决方案2
0 2016-09-11 09:11:00