輔助路由如何在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中工作？

回答

相關問題