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

Question

<li><a [router-link]="['/contact']"><strong>Contact</strong></a></li>

我在 index.html 中有一个导航栏，其中有一个联系人选项卡。我想调用该选项卡内我的 'app' 文件夹中的联系人组件。以下是我试过但没有用的语法....

我的 Angular CLI 版本是 1.4.10

Answer 1

您需要配置您的应用程序路由，我个人在 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 { }

然后在您的导航栏中，<li><a routerLink="contact"><strong>Contact</strong></a></li>

小心使用 <router-outlet></router-outlet> 而不是 <app-yourAppName></app-yourAppName> 来调用 app.component.html 中的主要组件，使用 router-outlet Angular 将调用您想要的组件点击路由器-link.

Answer 2

@Alexis

//app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {RouterModule,Route} from '@angular/router';
//importing components
import { ContactComponent } from './contact/contact.component';
//creating URLs for components
const routelist:Route[]=[
  {path:'contact', component:ContactComponent},
]
@NgModule({
  declarations: [
    AppComponent, ContactComponent//Components registered.
  ],
  imports: [
    BrowserModule,RouterModule.forRoot(routelist)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!--Main index.html file outside app folder-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heroes</title>
  <base href="/">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <header>
        <div class="container">
            <img src="./assets/logo.png" alt="logo" class="pic" height="70" width="90">
            <nav>
                <ul>
                    <li><a router-link="contact"><strong>Contact</strong></a></li>
                    <li><a href="#"><strong>About</strong></a></li>
                </ul>
            </nav>
        </div>
    </header>
  <app-root></app-root>
  <footer><strong>|| <i class="fas fa-copyright"></i> BAREFACED Bear ||</strong></footer>
</body>
</html>


<!--app.component.html file-->
<router-outlet></router-outlet>

Answer 3

路由模块采用 's'，试试看是否有效

Answer 4

您看到我的回答了吗？我告诉您在 routerLink 中更改 router-link 来尝试？有用吗？

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

How to call component from index.html in a hyperlink in Angular 4?

angular

angular-router