辅助路由如何在Angular2 RC5/Router3 RC1中工作？

几乎没有关于网络辅助路线的任何信息，对RC5/RC1来说更是如此，我希望这里的某个人能够让他们工作（他们应该是固定的或者我听说过的，但这是关于它）。辅助路由如何在Angular2 RC5/Router3 RC1中工作？

我得到了以下路由声明：

import { 
    RouterModule, 
    Routes 
} from '@angular/router'; 

import { ContactsComponent } from './contacts.component'; 
import { NewContactComponent } from './new-contact.component'; 

const contactsRoutes: Routes = [ 
    { path: '', component: ContactsComponent }, 
    { path: 'new', component: NewContactsComponent, outlet: 'form' } 
]; 

export const contactsRouting = RouterModule.forChild(contactsRoutes);

这里的routerLink和outlet上ContactsComponent：

<a [routerLink]="['.', 'form:new']"> 
    <button md-fab class="md-fab"> 
     <md-icon class="md-24">add</md-icon> 
    </button> 
</a> 
<router-outlet name="form"></router-outlet>

然而，这只会导致这样的错误信息

Error: Cannot match any routes: 'contacts/form%3Anew'

有没有人有A的工作示例ngular2 RC5/Router3 RC1？

来源

2016-08-18 Thorsten Westheider

据我所知，应该是这样的

<a [routerLink]="[{ outlets: { 'aux': ['/employee/14/chat'] } }]">

参见https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

来源

2016-08-18 11:04:58

不，几乎相当于相同的错误信息。我在这里得到了一个plnkr http://plnkr.co/edit/aey1jTdc72vN5voqkVFZ?p=preview，但它与我的问题中的代码有点不同。无论如何，只要修改'routerLink'就行。 –

我发现你的路由配置有点混乱。还没有在RC.5（带模块）中体验过路线。我更新了我的答案。生成的URL看起来很好，我不知道你的配置需要什么确切的路径（而不是我的答案中的'/ employee/14 /'）。另请参阅https://github.com/angular/angular/issues/10726 –

中的Plunkers是的，plnkr有点令人困惑，我已经测试了一些东西。无论如何，清理它，增加你的建议，并得到'不能匹配任何路线：'employee/14/chat; outlets =％5Bobject％20Object％5D'' - 看起来很有希望，但我还没有完成，请参阅更新的plnkr这里http://plnkr.co/edit/aey1jTdc72vN5voqkVFZ?p=preview –

我终于得到了这个工作（使用源，卢克），与一捻现在，但我我会继续调查，直到找到完整的解决方案。

鉴于该路由设置

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
    { path: 'welcome', component: WelcomeComponent }, 
    { path: 'employee/:id', component: EmployeeDetailComponent } 
    { path: 'chat', component: ChatComponent, outlet: 'aux' } 
];

即与在根路径中的辅助路线（这是我所提到的扭转），我可以写

<a [routerLink]="['/', { outlets: { primary: 'employee/14', aux: 'chat' } }]"

，并将其转换到这个路线：

/employee/14(aux:chat)

点击这个链接，然后实际上呈现在插座组件，

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<router-outlet></router-outlet><router-outlet name="aux"></router-outlet>' 
}) 
export class AppComponent {}

完整的plnkr可以找到here。

一旦我得到这个工作的子组件，我会更新这个答案。

来源

2016-08-18 16:45:07

我有它的子路线工作，我所做的是这样的：[routerLink] =“['/父母'，{出口：{aux：'孩子'}}]”不幸的是，当点击时，奇怪的网址出现在地址栏和刷新产生错误...让我们知道更新 – Ayyash

辅助路由如何在Angular2 RC5/Router3 RC1中工作？

回答

相关问题