Question

我在使用多个路由插座时遇到此问题。例外：未捕获（承诺）：错误：无法找到主要插座加载＆＃39; HomeComponent＆＃39; 错误：无法找到要加载的主要插座＆＃39; HomeComponent＆＃39;

我想在点击链接时在主页中加载功能组件。联系页面应该是独立页面，而不是在主页中加载。

我希望我的目标网页应该是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 {
}

Answer 1

在home.component.ts将此templateUrl: './home.html'更改为templateUrl: 'home.component.html'，假设它们位于同一目录中，因为找不到包含主要插座的主组件模板，因为基于您提供的info，您没有home.html

不同模板中的多个路由angular2 JS

1 个答案: