NgFor和组件选择器在<router-outlet&gt.内不能工作。

Question

我使用的是angular cli，我在使用过程中遇到了一些问题。<router-outlet>.当我尝试使用一个组件选择器，如 <app-class> 甚至于 *ngFor 里面 <div> 当这些东西在一个被 <router-outlet>.我希望有人知道为什么它不工作，如何使它工作。

这是我的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 { 

}

我的老师.组件.html。

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

我的my-classes-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,
    // ...
  ],
  // ...
})