0

PS：我已经引用了有关此标题引用的所有问题，并在我的代码中更正了这些项目。

我有主页（登录后），其中包含<router-outlet name="mainoutlet"></router-outlet>加载其子页面的内容。子页面是延迟加载行为，所以我有一个如下的路由结构（app.module.ts），但是即使它的父页面（HomeComponent）有一个下面的错误<router-outlet>

Error: Cannot find primary outlet to load 'ChildComponent'

注意：app.comonent.html<router-outlet>已经区分了家庭控制器的路由器，我给了一个 name=mainoutlet。

app.component.html

<h1>
    {{title}}  
    <button (click)="home()">Home</button>
    <router-outlet></router-outlet>
</h1>

app.compoenent.ts

import { Component } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';
import { NgModule } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor(private router: Router) { }

  public home() {
    this.router.navigate(['/home'], { skipLocationChange: true });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes, Router } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';


const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'home', component: HomeComponent,
    children: [
        { path: 'child', 
        loadChildren:  "app/child/child.lazy.module#LazyModule", outlet: 'mainoutlet' }
    ]
  },

];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

home.component.html

<h1>
  {{title}}
  <button (click)="child()">childpage</button>
  <nav>
    <a [routerLink]="[{ outlets: { mainoutlet: ['child'] } }]">Contact</a>    
  </nav>
  <router-outlet name="mainoutlet"></router-outlet>
</h1>

home.component.ts

import { NgModule } from '@angular/core'; 
import { Component } from '@angular/core';
import { RouterModule, Routes,Router } from '@angular/router';

@Component({
  selector: 'home-page',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  title = 'Home page';
  constructor(private router:Router){

  }  

  child(){
    //this.router.navigate(['/home',{outlet:{mainoutlet:'child'}}]);
    this.router.navigate(['/home', { outlets: { mainoutlet: 'child' } }]);
  }
}

child.component.html

<h1>
   {{title}}
</h1>

child.component.ts

import { NgModule } from '@angular/core'; 
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'child-page',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  title = 'Child page';
  constructor(){
  }  
}

包.json

{
  "name": "sampleroute",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}
4

0 回答 0