Question

我正在使用RC5，出于某种原因无论我做什么，我都无法从其他组件的模板中加载我的一个组件。我的所有组件都包含在我的app.module.ts中，它们都在我的@NgModule声明中。我在app.html中有我的元素，它根据网址加载了3个其他组件。但是如果我尝试在从路由器加载的组件中有另一个组件，如果我检查它只是显示我放在模板中的html而不是加载其他组件。我花了最后15个小时试图解决这个问题，我认为没有理由说它不起作用。请帮忙。

这是我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { routing, appRoutingProviders } from './app.routing';
import {Home} from './home.component';
import {Login} from './login.component';
import {Rating} from './rating.component';
import {Profile} from './profile.component';
import {Subordinates} from './subordinates.component';
import {RateEmployee} from './rate-employee.component';
import {LocalStorageService, LOCAL_STORAGE_SERVICE_CONFIG} from 'angular-2-local-storage';

let localStorageServiceConfig = {
    prefix: 'my-app',
    storageType: 'sessionStorage'
};

@NgModule({
  imports:      [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    Home,
    Login,
    Rating,
    Profile,
    Subordinates,
    RateEmployee
  ],
  providers: [
    appRoutingProviders,
    LocalStorageService,
    { provide: LOCAL_STORAGE_SERVICE_CONFIG, useValue: localStorageServiceConfig }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是我的app.html

<header id="framework-header">
  <!--<div id="logo"><span class="icon-star"></span> Ranky</div>-->
  <div id="logo"><img src="images/logo.svg" alt="Ranky"></div>
  <!--<div id="mobile-menu-buttton"><a href="#menu"><span class="icon-th-menu"></span></a></div>-->


  <nav id="framework-nav">
    <ul>
      <li><a routerLink="/profile" routerLinkActive="active">Profile</a></li>
      <li><a routerLink="/subordinates" routerLinkActive="active">Subordinates</a></li>
      <li><a routerLink="/login" routerLinkActive="active">Logout</a></li>
    </ul>
  </nav>

</header>

<section id="main">
    <router-outlet></router-outlet>
</section>

<footer id="framework-footer">
  <small>&copy; Ranky 2016, All Rights Reserved.</small>
</footer>

然后profile.html

<h2>My Self Ranking</h2>

          <rating></rating>

          <div class="form-row field">
            <label for="confirm-password">Provide self evaluation</label>
            <textarea name="self-comments" id="self-comments"></textarea>
          </div>

rating.component.ts

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

@Component({
  selector: 'rating',
  templateUrl: 'templates/rating.html',
})

export class Rating {}

最后是rating.html

<div class="label">Click on a star to rank your performance:</div>

Answer 1

该问题与我在Gulp流程中使用Gulp-Uglify捆绑SystemJS有关。显然，这会让事情变得不起作用而且没有错误......

组件不会加载到另一个组件的模板中

1 个答案: