Question

У меня проблема с упражнением, которое я выполняю в настоящее время, и я не могу завершить sh из-за маршрутов, у меня есть дочернее представление, и я не могу использовать routerLink, не активируется!

У меня есть представление для входа в систему, которая перенаправляет на домашний компонент, имеющий дочерние компоненты, и там ссылки на маршруты не работают, остаются как обычный текст.
Когда я пытаюсь использовать выход маршрутизатора, компиляция выдает ошибку:

ОШИБКА в упражнении / home / home.component. html: 15: 5 - ошибка NG8001: 'выход маршрутизатора 'не является известным элементом:
1. Если' router-outlet 'является Angular компонентом, то убедитесь, что он является частью этого модуля.
2. If' router-outlet 'является веб-компонентом, затем добавьте' CUSTOM_ELEMENTS_SCHEMA 'к' @ NgModule.schemas 'этого компонента, чтобы подавить это сообщение.
15 ~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~

упражнение / home / home.component.ts: 6: 16 6 templateUrl: './home.component.html' , ~~~~~~~~~~~~~~~~~~~~~~~ Err или встречается в шаблоне компонента HomeComponent.

Cenario выглядит следующим образом:

1- app.component. html имеет панель навигации для перенаправления на другие страницы и работает нормально, моя проблема начинается с маршрута для упражнения 2 - представления:

упражнение входа в систему home view1 view2

3- У меня есть вход на страницу входа в систему он перенаправляет на дом, у которого есть навигационная панель для перенаправления на view1 и view2, но «routerLink» и «router-outlet» не работают. 4- Мои файлы выше 5- Angular версии 9.0.3

Может ли кто-нибудь помочь понять, что я делаю неправильно?!

========= ================ РЕШЕНИЕ: Добавьте ОТСУТСТВУЮЩИЙ КОМПОНЕНТ HomeComponent в объявлениях

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { UrlParamsComponent } from './url-params/url-params.component';
import { FormsModule } from '@angular/forms';
import { UserComponent } from './child-route/user/user.component';
import { ExerciseComponent } from './exercise/exercise.component';
import { SimpleRouteComponent } from './simple-route/simple-route.component';
import { CodeDrivenComponent } from './code-driven/code-driven.component';
import { QueryParamsComponent } from './query-params/query-params.component';
import { ChildRouteComponent } from './child-route/child-route.component';
import { LoginComponent } from './exercise/login/login.component';

@NgModule({
   declarations: [
      AppComponent,
      NotFoundComponent,
      UrlParamsComponent,
      UserComponent,
      ExerciseComponent,
      SimpleRouteComponent,
      CodeDrivenComponent,
      QueryParamsComponent,
      ChildRouteComponent,
      LoginComponent,
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

=========================== app.component. html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" routerLink="">Angular Routing</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="simple-route" routerLinkActive="active">Simple-route</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="code-driven" routerLinkActive="active">Code-Driven</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="url-params" routerLinkActive="active">Url-Params</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="query-params" routerLinkActive="active">Query-Params</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="child-route" routerLinkActive="active">Child-Route</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="exercise/login" routerLinkActive="active">Exercise</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

=========================================== app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';
import { UrlParamsComponent } from './url-params/url-params.component';
import { UserComponent } from './child-route/user/user.component';
import { USER_CHILD_ROUTES } from './child-route/user/user.routes';
import { HomeComponent } from './exercise/home/home.component';
import { HOME_CHILD_ROUTES } from './exercise/home/home-routing';
import { SimpleRouteComponent } from './simple-route/simple-route.component';
import { CodeDrivenComponent } from './code-driven/code-driven.component';
import { FirstRouteComponent } from './simple-route/first-route/first-route.component';
import { SecondRouteComponent } from './simple-route/second-route/second-route.component';
import { FirstCodeDriverComponent } from './code-driven/first-code-driver/first-code-driver.component';
import { SecondCodeDriverComponent } from './code-driven/second-code-driver/second-code-driver.component';
import { UrlParamsFirstComponent } from './url-params/url-params-first/url-params-first.component';
import { UrlParamsSecondComponent } from './url-params/url-params-second/url-params-second.component';
import { QueryParamsComponent } from './query-params/query-params.component';
import { QueryParamsFirstComponent } from './query-params/query-params-first/query-params-first.component';
import { ChildRouteComponent } from './child-route/child-route.component';
import { ExerciseComponent } from './exercise/exercise.component';
import { LoginComponent } from './exercise/login/login.component';

const routes: Routes = [

  // simple link routes
  { path: "simple-route", component: SimpleRouteComponent },
  { path: "simple-route/first-route", component: FirstRouteComponent },
  { path: "simple-route/second-route", component: SecondRouteComponent },

  // code routes
  { path: "code-driven", component: CodeDrivenComponent },
  { path: "code-driven/first-code-driver", component: FirstCodeDriverComponent },
  { path: "code-driven/second-code-driver", component: SecondCodeDriverComponent },

  // Using URL PARAMS
  { path: "url-params", component: UrlParamsComponent },
  { path: "url-params/url-params-first/:message", component: UrlParamsFirstComponent },
  { path: "url-params/url-params-second/:message", component: UrlParamsSecondComponent },

  // Using Query PARAMS
  { path: "query-params", component: QueryParamsComponent },
  { path: "query-params/query-params-first/:message", component: QueryParamsFirstComponent },

  // Child routes
  { path: "child-route", component: ChildRouteComponent },
  { path: "child-route/user/:id", component: UserComponent, children: USER_CHILD_ROUTES },

  // Exercise
  { path: "exercise", component: ExerciseComponent },
  { path: "exercise/login", component: LoginComponent },
  { path: "exercise/home/:username", component: HomeComponent, children: HOME_CHILD_ROUTES },

  // redirects to the home-root component
  // { path: "", redirectTo: "", pathMatch: "full" },

  // not found any route
  { path: "**", component: NotFoundComponent }
];

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

и вот моя проблема, я не могу нажать на маршрутизаторы

============== home.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  user: User = new User();

  constructor(activatedRoute: ActivatedRoute) {

    activatedRoute.params.subscribe((params) => {
      this.user.username = params['username'];
    });
  }

  ngOnInit() {
  }

}

class User {
  username: string;
}

================================= home.component. html

<hr>

<ul class="nav navbar-nav item">
    <li>
        <a routerLink='View1'>View1</a>
    </li>
    <li>
        <a routerLink="View2">View2</a>
    </li>
</ul>

<h1>Welcome Home, {{user.username}}</h1>

<div class="container">
    <!-- <router-outlet></router-outlet> -->
</div>
<br>
<a routerLink="exeercise/login">Logout</a>

===================================
home-routing.ts

import { Routes } from '@angular/router';
import { View1Component } from './view1/view1.component';
import { View2Component } from './view2/view2.component';

export const HOME_CHILD_ROUTES: Routes = [
    { path: "view1", component: View1Component },
    { path: "view2", component: View2Component }
];

====================================
login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username: string;

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  login() {
    console.log('TRIGGER LOGIN...', this.username);
    this.router.navigate(['exercise/home', this.username]);
  }

}

============================ login.component. html

<hr>

<input [(ngModel)]="username" type="text">

<button (click)="login()">Login</button>

Akhil Naidu · Answer 1 · 26 февраля 2020

Импорт RouterModule в ваш app.module.ts

import { RouterModule } from '@angular/router';

Добавьте RouterModule в ваш app.module.ts imports []

imports: [RouterModule]

РЕШИТЬ! Angular 9 проблемы с роутером и роутером

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

РЕШИТЬ! Angular 9 проблемы с роутером и роутером

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы