Question

我正在学习Angular2框架，并且只是卡在中间。目标 - 从所需组件加载视图的简单应用程序（主页）。

这就是我所拥有的：

应用程序/ app.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

应用程序/ 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.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>

应用程序/家庭/ 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.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);

应用程序/家庭/ home.component.html

<div>HomeComponent</div>

由于它来自组件定义，我有各自的DemoSevice，目前还没有。应用程序启动后我得到了＃34;正在加载......＆＃34;没有别的变化。

你能否建议我正确的道路？

Answer 1

您应该在router-outlet内放置app.component.html指令。添加该指令的原因是，它将跟踪浏览器URL＆amp; Angular路由器将在Component指令

中加载适当的router-outlet

<强> /app/app.component.html

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

此外，您必须在index.html

上放置与angular2相关的各种脚本文件

<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）您需要将template: require('./app.component.html')更改为templateUrl:'app/app.component.html'。

2）尝试将其更改为

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

3） app / app.componet.html

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

Angular2，我做错了什么？

2 个答案: