Question

我试图按角度显示来自不同模块的嵌套组件，并想出了通过辅助布线来实现的想法。（尽管我不确定这是否是最好的方法，对此的任何想法都将非常有用）

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingModule} from './landing/landing.module';
@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    LandingModule,
    AppRoutingModule
    ],
  providers: [],
  bootstrap: [AppComponent]
 })
export class AppModule { }

app-routing.moudle.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    {path: '', redirectTo: '/start', pathMatch: 'full'},];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
export class AppRoutingModule { }

landing.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-landing',
    template: `<app-landing-header></app-landing-header>
               <router-outlet name="login"></router-outlet>
               <app-landing-footer></app-landing-footer>`
})
export class LandingComponent {
}

landing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule} from '@angular/router';
import { LandingComponent } from './landing.component';
import { LandingHeaderComponent } from './landing-header/landing-header.component';    
import { LoginComponent } from './login/login.component';    
const routes: Routes = [
    {path: 'start', component: LandingComponent,
        children: [
            {   path: 'login',
                outlet: 'login',
                component: LoginComponent}
        ]},
]

@NgModule({
  imports: [
    CommonModule,
      RouterModule.forChild(routes)
  ],
  declarations: [LandingComponent,
      LandingHeaderComponent,          
      LoginComponent,
      ],
    exports: [
        RouterModule
    ]
})
export class LandingModule { }

导航到/ start时，它显示相应的组件和着陆页眉的工作状态。但是导航到/ start（login：login）时出现错误

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“登录”

Answer 1

我认为您遇到的问题与https://github.com/angular/angular/issues/18271

根据该线程，命名的插座不能作为子路由正常工作。

角嵌套组件布线

1 个答案: