如何在Angular 4中的超链接中从index.html调用组件？

---

联系

您需要配置您的应用程序路径，我个人在app.module.ts中执行此操作，但您可以在另一个文件中执行此操作，然后将其导入到app.module.ts中

import ...
import { RouterModule, Routes } from '@angular/router';

import { ContactComponent } from 'path of component';

const appRoutes: Routes = [
   {path: 'contact', component: contactComponent}
] 

@NgModule({
   declarations: [
      ...,
      ContactComponent
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot(appRoutes)
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

然后在导航栏中，

联系

在
app.component.html
中，请小心使用
而不是
来调用您的主组件，路由器将通过单击路由器链接来调用您想要的组件。
@Alexis


//app.module.ts文件
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“./app.component”导入{AppComponent}；
从'@angular/router'导入{RouterModule，Route}；
//导入组件
从“./contact/contact.component”导入{ContactComponent}；
//为组件创建URL
常数路由列表：路由[]=[
{路径：'contact'，组件：ContactComponent}，
]
@NGD模块({
声明：[
AppComponent，ContactComponent//已注册的组件。
],
进口：[
BrowserModule，RouterModule.forRoot（routelist）
],
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

英雄



| | | | |
路由模块采用“s”，尝试一下，然后告诉我它是否有效
你看到我的回答了吗，我在
路由链接中告诉你通过更改
路由器链接来尝试？有效吗？
您使用的是Angular4还是AngularJS 1.4？给出一个显示如何使用此链接的屏幕。Angular 4和Angular/cli版本为1.4.10我已经在app.module.ts中注册了所有内容，但仍然无法从main index.htmlc调用组件。您可以向我显示
app.module.ts
，
app.module.html
的屏幕吗，请使用导航栏输入您的文件？抱歉，没有任何更改。对不起，我犯了一个错误，请编写
routerLink
而不是
router link