組件不會加載到另一個組件的模板中

我使用RC5，出於某種原因，無論我做什麼，我都無法從其他組件的模板中加載其中一個組件。我的所有組件都包含在我的app.module.ts中，它們都在我的@NgModule聲明中。我有我的元素在app.html中，根據url加載其他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>

來源

2016-08-24 Sean

您可以在plunker上覆制問題嗎？ –

問題竟然是關係到我與SystemJS捆綁咕嘟咕嘟過程中使用咕嘟咕嘟，醜化。顯然，這使得事情無法正常工作，並且不會出現任何錯誤...

來源

2016-08-25 17:48:44 Sean

組件不會加載到另一個組件的模板中

回答

相關問題