首页 文章

Angular 2.路由问题

提问于
浏览
1

我无法在列表视图中配置路由参数 . 单击链接时,ContentViewer组件无法打开 . 调试写入错误:

1.Uncaught(承诺):错误:无法匹配任何路由 .

2.未处理的承诺拒绝:无法匹配任何路线 . 网址段:'components / input';区域:角;任务:Promise.then;值:

这是我的主要服务 .

const LSNS  = [
{   name: 'Helpers' , 
items: [
    { id : "autocomplete" , name : "Autocomplete" },
    { id : "checkbox" , name : "Checkbox" },
    { id : "input" , name : "Input" },
   ]
},
{    name: 'front-back-end',
 items: [
    { id : "video_chat", name : "Video chat" },
    { id : "audio_chat", name : "Audio chat" },
    { id : "simple_chat", name : "Simple chat"},
    { id : "another", name : "Another"}
     ]
}
]
 const BMJ = LSNS.reduce((function(a,b){
        return a.concat(b.items);
 }), []);

@Injectable()
 export class LSNDiscriptionService {
    getItemLSNS(): Hlsns[] {
    return LSNS;
}; 
    getBMJ(id:string) {
        return BMJ.find(bm => bm.id === id);
    };
 };

我的路由 .

{ path: 'web_app', component: LeftSideNav,
    children:[
        { path:'', component: BossContent },
        { path:'components/:id', component: ContentViewer }

HTML

<nav *ngFor="let lsn of lsns" class="lsnss" > 
    <h3>{{ lsn.name }}</h3>
        <ul class="lsns">
            <li *ngFor="let bm of lsn.items" class="lop" > 
                <a [routerLink]="['/components', bm.id]">{{bm.name}}</a>

未显示的组件

import { Component, OnInit }               from '@angular/core';
import { ActivatedRoute }          from '@angular/router';
import { LSNDiscriptionService, LSNSItem } from '../common-
service/common.service';

export class ContentViewer implements OnInit  {
bm:LSNSItem;
constructor( public lds:LSNDiscriptionService,
             private _route:ActivatedRoute){}

ngOnInit():void {    
  this._route.params.subscribe(params => this.bm = 
  this.lds.getBMJ(params['id']));     
 };
 }

1 回答

  • 0

    您当前的实现指示一个绝对路由,您希望导航到子路由 . 在子路由前添加父路径可能会解决问题 .

    <a [routerLink]="['/web_app/components', bm.id]">{{bm.name}}</a>
    

相关问题