NgFor 和组件选择器在内部不起作用 <router-outlet>

Question

我正在使用 angular cli，但在使用 <router-outlet> 时遇到了一些问题。当我尝试在 <div> 中使用像 <app-class> 甚至 *ngFor 这样的组件选择器时，当它们位于 [=14= 的 "called" 组件中时，它不起作用]. 我希望有人知道为什么它不起作用以及如何让它起作用。

这是我的 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 { NavbarComponent } from './navbar/navbar.component';
import { StudentComponent } from './student/student.component';
import { RouterModule } from '@angular/router';
import {Routes} from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TeacherComponent } from './teacher/teacher.component';
import { MyClassesComponent } from './my-classes/my-classes.component';

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'student', component: StudentComponent},
  {path: 'home', component: HomeComponent},
  {path: 'teacher', component: TeacherComponent, children: [
        { path: 'myclasses', component: MyClassesComponent},
        { path: '', component: MyClassesComponent}
    ] 
   }
];

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

}

我的 teacher.component.html :

<div class="container-fluid">
    <h1 class="text-center">Jhon Doe</h1>
    <hr>
    <router-outlet></router-outlet>
</div>

我的-类-compenent.html:

<h1 class="text-center display-1">My Classes</h1>
<div *ngFor="let number of [0,1,2,3,4,5]">
    <hr class="w-20">
    <div class="row justify-content-center">
        <div class="col-4 align-center">
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="width: 100%;">
                <h2>Ma classe n°</h2>
            </a>
            <ul class="list-group list-group-flush collapse" id="collapseExample">
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

为了能够看到您放入路由配置中的实际组件，您必须将其添加到相应 NgModule 的声明中:)

@NgModule({
  declarations: [
    MyClassesComponent,
    // ...
  ],
  // ...
})

NgFor 和组件选择器在内部不起作用 <router-outlet>

NgFor and component selectors doesn't works inside <router-outlet>

angular

components

selector

ngfor

router-outlet