Question

平，

我有一个有用的应用程序。当我通过点击移动到子组件时，它可以正常工作，但是当我在地址栏上写入路径时，它不起作用。

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/进行访问时，我收到同样的错误。

解决方案：好的，我创建了一个angular-cli项目，这次路由正在与router.navigate(['/testroutes')和ALSO一起使用http://localhost:4200/testroutes/所以我在2中拆分了sublime并仔细寻找差异，我发现了这个与<base href="./">不同的<base href="/">一个简单的点导致错误。当我克隆项目时，点在那里，或者我把它放在那里是因为我不知道的一些奇怪的原因。希望这有助于某人。

Answer 1

好的，我创建了一个angular-cli项目，这次路线正在使用router.navigate(['/testroutes')和ALSO与http://localhost:4200/testroutes/合作所以我在2中拆分了sublime并仔细寻找差异，我发现了这个{ {1}}与<base href="./">不同一个简单的点导致错误。当我克隆项目时，点在那里，或者我把它放在那里是因为我不知道的一些奇怪的原因。希望这有助于某人。

Answer 2

问题并非100％明确，但我认为所有组件都是在一个AppModule中定义的？

我认为你可以稍微简化你的路由：

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

SiteComponent模板需要为子路由<router-outlet>（'portafolio /：id'）

Angular 2：Child Routes无法通过地址栏工作

2 个答案: