angular - NgFor 和组件选择器在内部不起作用
问题描述
我正在使用 angular cli,但遇到了一些问题<router-outlet>
。当我尝试使用类似的组件选择器<app-class>
,甚至是*ngFor
内部的 a<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 {
}
我的 teacher.component.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>
解决方案
为了能够看到您放入路由配置的实际组件,您必须将其添加到相应的声明中NgModule
:)
@NgModule({
declarations: [
MyClassesComponent,
// ...
],
// ...
})
推荐阅读
- javascript - 如何让javascript只接受给定的正则表达式?
- powershell - 查找注册表项并删除父项的单线工作但返回错误
- angular - 如何在 redux 选择器中创建新对象并返回它
- amazon-web-services - AWS CodeCommit - 当特定路径存在差异时拒绝推送
- c# - 第一次按键后暂停,同步解决
- python - 发送 POST 请求的正文
- node.js - 升级到 Mojave 10.14.6 后 NPM、Node 无法打开
- windows - Windows:在快捷方式目标字符串中包含端口号
- python - 无法设置 virtualenv - 源激活问题.ps1
- excel - 如何在不使用转置的情况下垂直列出水平数据?