Angular 8 показывает ошибку TS2339, но код работает нормально, и я получаю правильный вывод

Question

Я получаю сообщение об ошибке как

ОШИБКА в файле src / app / home / home.component.ts: 13: 37 - ошибка TS2339: Свойство «имя» не существует для типа «строка | Тип'. Свойство 'name' не существует для типа 'string'.

13 this.pageName = route.component.name;

, но мой код работает нормально. это только вызывает проблемы при создании кода

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

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
pageName;
constructor(private route: ActivatedRoute,
private router: Router) { 
  this.pageName=route.component.name;
}
ngOnInit() {
}
}

Я тоже пытался изменить версию ES. не помогает

Answer 1

Помимо того, что указано в post , вы можете использовать свойство Route's data , чтобы снабдить ваши компоненты заданными маршрутом c пользовательскими данными.

data:

Дополнительные определяемые разработчиком данные, предоставляемые компоненту через ActivatedRoute. По умолчанию дополнительные данные не передаются.

Данные, определяемые разработчиком, также являются безопасным и практичным способом, поскольку после создания приложения (для производства) именам классов присваивается произвольное имя, поэтому не стоит полагаться на него.

Пример:

Конфигурация маршрутизации

const routes: Routes = [
  // ...
  {
    path: 'home',
    component: HomeComponent,
    data: {
      page: 'Home Page',
      class: 'super-sweet-home',
      color: 'blue',
      // ....
    },
  }
];

Использование данных

• Решение 1: Внутри компонента, например HomeComponent.

private subscription: Subscription;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.subscription = this.route.data.subscribe((data: any) => { 
        /* data will be provided after navigation ends successfully */ 
    });
}

• Решение 2: Через События маршрутизатора с использованием Singleton Service , например, SiteService

public readonly currentPageData = new Subject<any>();

constructor(private router: Router) {
this.router.events.pipe(filter(event => event instanceof ActivationEnd))
  .subscribe(event => {
    this.currentPageData.next((event as ActivationEnd).snapshot.data as any);
  });
}

Внутри компонента вы можете добавить сервис и подписаться на currentPageData из SiteService, например:

constructor(private siteService: SiteService) {
    this.siteService.currentPageData.subscribe((data) => {
      /* data data data */
    });
}

Последнее, но не менее важное: не забудьте отменить подписку .?