我有一個工作的應用程序。當我移動到子組件通過點擊它的作品,但是當我在地址欄上寫道路它不起作用。
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="/">
簡單點導致了錯誤。當我克隆這個項目時,這個小點就在那裏,或者我把它放在了那裏,出於一些我不知道的奇怪原因。希望這可以幫助某人。
如果應用程序未啓動,您的瀏覽器控制檯中必須有錯誤。你介意與我們分享這個錯誤嗎? – mickdev
你可以嘗試在單獨的路線使用它嗎? (不是''''的小孩) – OmarIlias
Omarllias ..之前不是X的小孩。還是發生了同樣的事情。這是錯誤。我在上面更新了mickdev。 –