Как вызвать компонент из index.html по гиперссылке в Angular 4? - PullRequest
0 голосов
/ 04 июля 2018

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

У меня есть файл navbar в index.html, в котором есть вкладка «Контакты». Я хочу вызвать компонент «Контакт», который находится в моей папке «app» на этой вкладке. Ниже приведен мой синтаксис, который я пытался, но не работал ....

Моя версия Angular CLI - 1.4.10

Ответы [ 4 ]

0 голосов
/ 04 июля 2018

Вы видели мой ответ, в котором я сказал вам попробовать, изменив router-link в routerLink? Это работает?

0 голосов
/ 04 июля 2018

@ 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>
0 голосов
/ 04 июля 2018

Модуль Routes принимает 's', попробуйте и скажите, работает ли он

0 голосов
/ 04 июля 2018

Вам необходимо настроить маршрут вашего приложения, лично я делаю это в 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, с выходом маршрутизатора Angular будет вызывать нужный компонент, нажав на ссылку маршрутизатора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...