角 - 儿童路由不工作

-1

我最后不得不使用这样的事情（从下面的代码略有不同）

onSelect(menuItem: string): void { 
    this.selectedMenuItem = menuItem; 
    if (menuItem == 'Upload') { 
     this.router.navigateByUrl('/adminhome/(adminhomeviewport:adminupload)'); 
    } 
    else if (menuItem == "Download") { 
     this.router.navigateByUrl('/adminhome/(adminhomeviewport:admindownload)'); 
    } 
    }

导航我不知道为什么必须这样做，或者为什么如果有另一种方式来做到这一点，但这给了我预期的行为。

我正在使用Angular，我试图在我的某个视图中使用命名的router-outlet。不幸的是，似乎没有任何工作。我的目标是让'http://localhost:4200/adminhome'页面上的名为'admin-viewport'的路由器插座显示'AdminUploadComponent'及其相关视图。

截至目前，父HTML，http://localhost:4200/adminhome，我可以成功地浏览到这个样子的：

<div class="home-root"> 
    <ul class="home-menu" ng-controller="AdminHomeComponent"> 
    <li *ngFor="let menuString of menuStrings" 
     [class.selected]="menuString === selectedMenuItem" 
     (click)="onSelect(menuString)"> 
     <span class="badge">*</span>{{menuString}} 
    </li> 
    </ul> 
    <router-outlet name="admin-viewport"></router-outlet> 
</div>

而且路线在我app.module.ts看起来是这样的：

RouterModule.forRoot([ 
{ 
    path: 'adminlogin', 
    component: AdminLoginComponent 
}, 
{ 
    path: 'search', 
    component: SearchQueryComponent 
}, 
{ 
    path: 'adminhome', 
    component: AdminHomeComponent, 
    children : [ 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport' 
    }, 
    ] 
}

]， {enableTracing：真正} ）

点击一个按钮，我尝试使用该浏览我的出口代码：

constructor(private router: Router,public route: ActivatedRoute) { 
    } 

    onSelect(menuItem: string): void { 
    this.selectedMenuItem = menuItem; 
    if(menuItem == 'Upload') 
    { 
     this.router.navigate(['/adminhome/adminupload', {outlet : 'admin-viewport'}]); 
    } 
    }

这当然引发以下错误：

error_handler.ts:1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport' 
Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport'

如何导航我的孩子路由器出口任何帮助将不胜感激。

编辑：当我实施@ Seejatheran的建议后列出我的路线，它仍然无法正常工作，当我列出我的路径时，我得到这个。

来源

2017-07-08 Black Dynamite

您需要定义以下儿童另一条路径，

{ 
    path: 'adminhome', 
    component: AdminHomeComponent, 
    children : [ 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport' 
    }, 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport/:type' 
    }, 
    ] 
}

来源

2017-07-08 03:13:13 Sajeetharan

在你ONSELECT方法试试这个：

this.router.navigate([{ outlets: { admin-viewport: ['adminupload'] } }]);

希望这有助于

来源

2017-07-08 05:16:41 brijmcq

角 - 儿童路由不工作

回答

相关问题