routerLink 在 Angular 中不起作用
Wai*_*ein 5 typescript angular-routing routerlink angular
我正在使用 TypeScript 学习 Angular JS。我有 Angular JS 的经验。但当它与 TypeScript 集成时，对我来说是全新的。我现在正在为我的应用程序配置路由。
\n\nThis is my app.module.ts file\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\nimport { FormsModule } from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\n\nimport { AppComponent } from \'./app.component\';\nimport { HomeComponent } from \'./home/home.component\';\nimport { DirectoryComponent } from \'./directory/directory.component\';\n//import { AppRoutingModule } from \'./app-routing.module\';\n\n\n\nimport { RouterModule, Routes } from \'@angular/router\';\n\n\n\nconst routes: Routes = [\n{\n path: \'\',\n component: HomeComponent\n},\n{\n path : \'directory\',\n component : DirectoryComponent\n}\n];\n\n\n\n@NgModule({\n declarations: [\n AppComponent,\n HomeComponent,\n DirectoryComponent,\n\n ],\n imports: [\n BrowserModule,\n FormsModule,\n HttpModule,\n RouterModule.forRoot(routes)\n ],\n providers: [ ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n我在该文件中配置了路线。当我直接从浏览器访问路由时，它正在工作。然后我尝试在 app.component.html 中添加链接。\n这是我的 app.component.html
\n\n<h1>\n {{title}}\n</h1>\n\n<div>\n <ul>\n <li>\n <a [routerLink]="[\'/\']">Home</a>\n </li>\n <li>\n <a [routerLink]="[\'directory\']">Directory</a>\n </li>\n </ul>\n</div>\n\n<div>\n <router-outlet></router-outlet> \n</div>\n然后我点击链接。两者根本不起作用。但是当我直接在地址栏中输入路由值时，它就可以工作了。我的 HomeComponent 和 DirectoryComponent 很简单。他们只是在显示一条消息。
\n\n当我第一次访问 \xe2\x80\x98/directory\xe2\x80\x99 url 时它正在工作。它显示目录页面。从那里，当我单击主页链接时，它会更新到主页。但url仍然是\xe2\x80\x98目录\xe2\x80\x99。但是当我再次单击目录链接时，什么也没有发生。
\n\n我遵循了这些解决方案
\n\n\n\n\n\n\n\n一切都不工作。
\n\n我检查了 HTML 元素，它正在正确呈现链接。问题是当我点击链接时，什么也没有发生。
\n\n
我正在使用最新版本的 Angular JS。我的代码有什么问题吗？
\n| 归档时间： |
|
| 查看次数： |
6005 次 |
| 最近记录： |