角2：兒童路線不工作的地址欄

我有一個工作的應用程序。當我移動到子組件通過點擊它的作品，但是當我在地址欄上寫道路它不起作用。

RouterModule.forRoot([    
     { 
      path:'', 
      component:SiteComponent, 
      children: [{    
      path:'portafolio/:id', 
      component:OutletComponent    
      } 
      ] 
     },  
     { 
      path:'**', 
      redirectTo: '', 
      pathMatch: 'full' 
     },  
     ]),

當我瀏覽到，讓我們使用router.navigate(['/portafolio', portafolio.id])第一組合，它工作正常說。但是，當我想通過在地址欄localhost：4200/portafolio/1上寫入來導航到第一個文件夾時，它不起作用。它不顯示404錯誤。只顯示'...'，這是我在index.html中的<app-root>標記之間所具有的。通配符正常工作，因爲任何其他錯誤的地址重定向到SiteComponent。我如何解決這個問題，以便能夠通過將地址欄寫入路徑來打開特定的portafolio？

更新：我改變了路由配置到：

RouterModule.forRoot([    
    { 
     path:'', 
     component:SiteComponent   
    }, 
    { 
     path: 'portafolio', 
     component:SiteComponent, 
     children: [{    
     path:':id',    
     component: OutletComponent 
     }]   
    },  
    { 
     path:'**', 
     redirectTo: '', 
     pathMatch: 'full' 
    },  
    ])

相同的行爲。它工作正常，直到我嘗試使用地址欄訪問任何投資組合。這是錯誤我得到：

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js

這是自舉組件：

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

@Component({ 
    selector : 'app-root', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 

}

這是OutletComponent定義：

@Component({ 
    templateUrl: './outlet.component.html', 
    styleUrls: ['./outlet.component.css'] 
}) 
export class OutletComponent implements OnInit { 
portafolios:any; 
numero:string; 

constructor(private _router:Router, 
      private _activatedRoute:ActivatedRoute, 
      private _formservice : FormService) { 
    _activatedRoute.params.subscribe((parametro:Params) => this.numero = parametro['id']); 
    _formservice.data$.subscribe(data=> { this.portafolios=data }); 
}

更新2：我想也許有有什麼錯：ID，所以我簡化並創建了一個TestComponent。

從'@ angular/core'導入{Component};

@Component({ 
    template: '<h1>Test</h1>', 
}) 

export class TestRoutesComponent { 

}

，加上另一個路徑

{path: 'testroutes',component: TestRoutesComponent}

不過，當我嘗試通過訪問地址欄http://localhost:4200/testroutes/我得到同樣的錯誤。

解決方案：好的，我創建了一個角的CLI項目，這一次的路線與router.navigate(['/testroutes')工作，還與http://localhost:4200/testroutes/所以我在2分裂崇高，仔細打量了差異，我發現這個<base href="./">不同，以<base href="/">簡單點導致了錯誤。當我克隆這個項目時，這個小點就在那裏，或者我把它放在了那裏，出於一些我不知道的奇怪原因。希望這可以幫助某人。

來源

2017-03-09 Raul Bustamante

如果應用程序未啓動，您的瀏覽器控制檯中必須有錯誤。你介意與我們分享這個錯誤嗎？ – mickdev

你可以嘗試在單獨的路線使用它嗎？（不是''''的小孩） – OmarIlias

Omarllias ..之前不是X的小孩。還是發生了同樣的事情。這是錯誤。我在上面更新了mickdev。 –

好吧，我創建了一個角度cli項目和這次路線正在與router.navigate(['/testroutes')並與http://localhost:4200/testroutes/也是所以我分裂崇高2，仔細尋找差異，我發現這<base href="./">不同於<base href="/">一個簡單的點造成的錯誤。當我克隆這個項目時，這個小點就在那裏，或者我把它放在了那裏，出於一些我不知道的奇怪原因。希望這可以幫助某人。

來源

2017-03-09 06:44:36

這不是100％清楚的問題，但我認爲所有組件定義在一個AppModule？

我認爲你可以簡化路由位：

RouterModule.forRoot([    
{ 
    path:'', 
    component:SiteComponent   
    children: [ 
    {    
     path:'portafolio/:id',    
     component: OutletComponent 
    }] 
},  
{ 
    path:'**', 
    redirectTo: '', 
    pathMatch: 'full' 
},  
])

SiteComponent模板需要對兒童路線<router-outlet>（「portafolio /：身份證」）

來源

2017-03-09 06:06:13

Hei garth74，是的，你的建議是我的第一個方法。是的，我在SiteComponent中有一個。檢查更新2。 –

角2：兒童路線不工作的地址欄

回答

相關問題