2017-01-22 125 views
0

我有一個Breadcrumb組件。它在編譯爲JavaScript時也可以正常工作,並且可以呈現所需的結果,但IDE會拋出一個我無法糾正的錯誤。它說如下: -TypeScript引發錯誤「屬性'麪包屑'在類型'數據'上不存在。」

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

我的麪包屑的代碼如下: -

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); 
     }) 
    } 
} 

麪包屑模型的代碼如下: -

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屏幕截圖如下: - enter image description here

請幫忙解決問題。出現此錯誤後,TSLint不會在瀏覽器上發出任何警告。

回答

2

angular您必須使用[name]表示法來獲取該值。很顯然,沒有「必須」,因爲它仍然可以正常工作,但要獲得打字稿編譯器停止抱怨使用:

route.snapshot.data['breadcrumb']; 

閱讀Custom Preloading Strategy和向下滾動到app/selective-preloading-strategy.ts樣本文件

+0

感謝指出這一點。我試了一下,它的工作原理。 –

相關問題