Angular TypeScript抛出错误“；财产'；面包屑&x27；不存在于类型'；数据'&引用；

我有一个面包屑组件。当编译成JavaScript时，它工作得很好，还呈现了所需的结果，但是IDE抛出了一个我无法纠正的错误。其内容如下：-

[ts] Property 'breadcrumb' does not exist on type 'Data'.

export class BreadcrumbModel{
    label:string;
    url:string;
}

[at-loader] src\app\shared\core\breadcrumb\breadcrumb.component.ts:34:44 
    Property 'breadcrumb' does not exist on type '{ [name: string]: any; }'.
errors  @   client?cd17:80
sock.onmessage  @   socket.js?e5d0:37
EventTarget.dispatchEvent   @   eventtarget.js?3e89:51
(anonymous) @   main.js?45b8:274
SockJS._transportMessage    @   main.js?45b8:272
EventEmitter.emit   @   emitter.js?927b:50
WebSocketTransport.ws.onmessage @   websocket.js?c17e:35
wrapFn  @   zone.js?fad3:1039
ZoneDelegate.invokeTask @   zone.js?fad3:275
Zone.runTask    @   zone.js?fad3:151
ZoneTask.invoke @   zone.js?fad3:345

我的面包屑代码如下：-

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

import { BreadcrumbModel } from './breadcrumb.model';

@Component({
  selector: 'breadcrumb',
  template: `
  <ol class="breadcrumb"> 
    <li *ngFor="let breadcrumb of breadcrumbs; let last = last">
      <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
    </li>
  </ol>`
})
export class BreadcrumbComponent {
  breadcrumbs: Array<BreadcrumbModel>;
  constructor(private router: Router, private route: ActivatedRoute) { }
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {  // note, we don't use event
        this.breadcrumbs = [];
        let currentRoute = this.route.root,
          url = '';
        do {
          let childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(route => {
            if (route.outlet === 'primary') {
              let routeSnapshot = route.snapshot;
              url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
              this.breadcrumbs.push({
                label: route.snapshot.data.breadcrumb,
                url: url
              });
              currentRoute = route;
            }
          })
        } while (currentRoute);
      })
  }
}

我在浏览器中遇到的错误如下：-

[ts] Property 'breadcrumb' does not exist on type 'Data'.

export class BreadcrumbModel{
    label:string;
    url:string;
}

[at-loader] src\app\shared\core\breadcrumb\breadcrumb.component.ts:34:44 
    Property 'breadcrumb' does not exist on type '{ [name: string]: any; }'.
errors  @   client?cd17:80
sock.onmessage  @   socket.js?e5d0:37
EventTarget.dispatchEvent   @   eventtarget.js?3e89:51
(anonymous) @   main.js?45b8:274
SockJS._transportMessage    @   main.js?45b8:272
EventEmitter.emit   @   emitter.js?927b:50
WebSocketTransport.ws.onmessage @   websocket.js?c17e:35
wrapFn  @   zone.js?fad3:1039
ZoneDelegate.invokeTask @   zone.js?fad3:275
Zone.runTask    @   zone.js?fad3:151
ZoneTask.invoke @   zone.js?fad3:345

我不想把目标从ES5改为ES6。这似乎不是可行的解决办法。IDE屏幕截图如下：-

---

请帮助解决这个问题。TSLint在我收到此错误后不会在浏览器上抛出任何警告。

在

angular

中，您“必须”使用

[name]

符号获取值。显然，没有“必须”，因为这两种方式都可以，但要让TypeScript编译器停止使用：

route.snapshot.data['breadcrumb'];

---

阅读并向下滚动至

app/selective preload strategy.ts

示例文件

angular

中的

，您“必须”使用
[name]
符号获取值。显然，没有“必须”，因为这两种方式都可以，但要让TypeScript编译器停止使用：

route.snapshot.data['breadcrumb'];

阅读并向下滚动至
app/selective preload strategy.ts
示例文件