Как сделать ссылку на другой компонент в Angular - PullRequest
Новая
       1

Как сделать ссылку на другой компонент в Angular

0 голосов
/ 17 апреля 2020

У меня есть автономная HomePage в одном компоненте в папке / app / main и другом компоненте Service в папке /app/service.
. На HomePage есть меню панели навигации, и я хочу перенаправить привязкой к Service Component, где все остальные компоненты перенесены (login / register и c).
Я попытался сделать с routerLink и router-outlet, но когда я это сделал, компонент Service появился под главной страницей, но он должен обновить sh и отображается вместо основного.

С:
<a class="nav-link" href="C:\Users\wojtek\Desktop\Project\src\app\service\service.component.html">Service</a>
В консоли отображается сообщение об ошибке: «Не разрешено загружать локальный ресурс: файл: /// C: /Users/wojtek/Desktop/Project/src/app/service/service.component.html "

Вот дерево моих файлов: tree

app. модуль: 

import { BrowserModule, Title} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './service/shared.module';
import { MainPageComponent } from './main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    MainPageComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    SharedModule,
    ],
  providers: [
    Title
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

app-routing.module: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainPageComponent } from './main/main.component';
import { LoginPageComponent } from './service/components/login/login.component';
import { ResetPasswordComponent } from './service/components/reset-password/reset-password.component';
import { RegisterComponent } from './service/components/register/register.component';
import { ServiceComponent } from './service/service.component';


const routes: Routes = [
    { path: '',  redirectTo: '/main', pathMatch: 'full' },
    { path: 'main', component: MainPageComponent},
    { path: 'login', component: LoginPageComponent },
    { path: 'reset-password', component: ResetPasswordComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'service', component: ServiceComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

shared.module: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColumnOneComponent } from './layouts/column-one/column-one.component';
import { ServiceComponent } from './service.component';
import { NavbarComponent } from './layouts/navbar/navbar.component';
import { LoginPageComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
import { AppRoutingModule } from '../app-routing.module';


@NgModule({
  declarations: [
    ServiceComponent,
    NavbarComponent,
    ColumnOneComponent, 
    LoginPageComponent,
    RegisterComponent,
    ResetPasswordComponent
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
  ],
  exports: [ColumnOneComponent, ServiceComponent]
})
export class SharedModule { }

У кого-то есть какое-то решение для этого?

...