角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="/">简单点导致了错误。当我克隆这个项目时，这个小点就在那里，或者我把它放在了那里，出于一些我不知道的奇怪原因。希望这可以帮助某人。

如果应用程序未启动，您的浏览器控制台中必须有错误。你介意与我们分享这个错误吗？ – mickdev

你可以尝试在单独的路线使用它吗？（不是''''的小孩） – OmarIlias

Omarllias ..之前不是X的小孩。还是发生了同样的事情。这是错误。我在上面更新了mickdev。 –

答

好吧，我创建了一个角度cli项目和这次路线正在与router.navigate(['/testroutes')并与http://localhost:4200/testroutes/也是所以我分裂崇高2，仔细寻找差异，我发现这<base href="./">不同于<base href="/">一个简单的点造成的错误。当我克隆这个项目时，这个小点就在那里，或者我把它放在了那里，出于一些我不知道的奇怪原因。希望这可以帮助某人。

答

这不是100％清楚的问题，但我认为所有组件定义在一个AppModule？

我认为你可以简化路由位：

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

SiteComponent模板需要对儿童路线<router-outlet>（“portafolio /：身份证”）

Hei garth74，是的，你的建议是我的第一个方法。是的，我在SiteComponent中有一个。检查更新2。 –

角2：儿童路线不工作的地址栏

相关推荐