多個路由在不同的模板angular2 JS

我在使用多個路由插座時遇到了這個問題。例外：未捕獲的（在承諾）：錯誤：無法找到主要出口到裝載「HomeComponent」錯誤：無法找到主要出口到裝載「HomeComponent」多個路由在不同的模板angular2 JS

我想加載主頁的功能組件上的點擊時鏈接。聯繫頁面應該是獨立的頁面，而不是在主頁中加載。

我希望我的着陸頁應該是home.component.ts，所以我已經列入app.html

app.component.ts

import { Component } from '@angular/core'; 
    import { Router } from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'as-main-app', 
    templateUrl: 'app.html' 
}) 

export class AppComponent { 
    constructor(private router: Router) { } 
}

app.html

<router-outlet></router-outlet>

home.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'as-home-app', 
    templateUrl: './home.html' 
}) 

export class HomeComponent { 

    constructor(private router: Router) { } 

}

home.html做爲

<div class="site-wrapper"> 
    <div class="site-wrapper-inner"> 
     <div class="cover-container"> 
      <div class="masthead clearfix"> 
       <div class="inner"> 
        <h3 class="masthead-brand">Cover</h3> 

        <ul class="nav masthead-nav"> 


         <li> 
          <a [routerLink]="['/home', {outlets: {'homeRoute': ['feat']}} ]">Feature2</a> 
         </li> 

         <li> 
          <a href="#">Contact</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <router-outlet name="homeRoute"></router-outlet> 
      </div> 
     </div> 
    </div>

app.routing.ts

import { FeaturesComponent } from './home/features.component'; 
import { HomeComponent } from './home/home.component'; 
import { ContactComponent } from './home/contact.component'; 
export const AppRoutes: any = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'contact', component: ContactComponent }, 
    { path: 'home', 
     component: HomeComponent, 
     children : [ 
      {path: '', component: HomeComponent}, 
      {path: 'feat', Component : FeaturesComponent, outlet: 'homeRoute'} 
     ] 
    }, 

]; 

export const RouterComponents: any = [ 
    FeaturesComponent, HomeComponent, ContactComponent 
];

features.component.ts

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

@Component({ 
    selector: 'as-app-page1', 
    template: '<h2>Feature Page</h2>' 
}) 
export class FeaturesComponent { 
}

contact.component.ts

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

@Component({ 
    selector: 'as-app-page1', 
    template: '<h2>Feature Page</h2>' 
}) 
export class FeaturesComponent { 
}

app.module .ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { RouterComponents, AppRoutes } from './app.routing'; 
import { RouterModule } from '@angular/router'; 
import { FeaturesComponent } from './home/features.component'; 
import { ContactComponent } from './home/contact.component'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     RouterComponents, 
     FeaturesComponent, 
     ContactComponent 
    ], 
    imports: [ 
     BrowserModule, 
     RouterModule, 
     RouterModule.forRoot(AppRoutes) 
    ], 

    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
}

來源

2016-12-18 abhy

在你home.component.ts改變這個templateUrl: './home.html'到templateUrl: 'home.component.html'假設他們是在同一個目錄，因爲它無法找到它包含的主要出口，因爲根據您提供的信息您的家庭組件模板，你不必home.html

來源

2016-12-18 19:00:18 Dummy

其實它是home.html而不是home.component.html。感謝您的更正。 :) – abhy

然後只是將'templateUrl：'。/ home.html''更改爲'templateUrl：'home.html'' – Dummy

仍然面臨同樣的問題。頁面正在加載，但在瀏覽器控制檯中，我可以看到錯誤'' EXCEPTION：未捕獲（承諾）：錯誤：無法找到主要插座加載'HomeComponent'「 – abhy

多個路由在不同的模板angular2 JS

回答

相關問題