Góc 2: Tuyến đường trẻ em không hoạt động bằng thanh địa chỉ

Question

Hei,

Tôi có một ứng dụng đang hoạt động. Khi tôi di chuyển đến các thành phần con bằng cách nhấp vào nó hoạt động nhưng khi tôi viết đường dẫn trên thanh địa chỉ nó không hoạt động.

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

Khi tôi điều hướng đến giả sử danh mục đầu tiên sử dụng router.navigate(['/portafolio', portafolio.id]) hoạt động tốt. Nhưng khi tôi muốn điều hướng đến danh mục đầu tiên bằng cách viết trên thanh địa chỉ localhost: 4200/portafolio/1 nó không hoạt động. Nó không hiển thị lỗi 404. Chỉ hiển thị '...' là những gì tôi có giữa các thẻ <app-root> trong index.html. Ký tự đại diện hoạt động tốt vì bất kỳ sai địa chỉ chuyển hướng khác đến SiteComponent. Làm cách nào để giải quyết vấn đề này để có thể mở một portafolio cụ thể bằng cách viết đường dẫn đến thanh địa chỉ?

UPDATE: Tôi đã thay đổi cấu hình định tuyến để:

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

hành vi tương tự. Nó hoạt động tốt cho đến khi tôi cố gắng sử dụng thanh địa chỉ để truy cập bất kỳ danh mục đầu tư nào. Đây là lỗi tôi nhận được:

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 

Đây là phần bootstrapped:

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

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

} 

Đây là định nghĩa 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 }); 
} 

UPDATE 2: Tôi nghĩ có lẽ đã có một cái gì đó sai với: id vì vậy tôi đơn giản hóa và tạo ra một TestComponent.

nhập {Component} từ '@ angular/core';

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

export class TestRoutesComponent { 

} 

Và thêm một Route

{path: 'testroutes',component: TestRoutesComponent} 

Tuy nhiên khi tôi cố gắng truy cập bởi thanh địa chỉ http://localhost:4200/testroutes/ tôi nhận được lỗi tương tự.

SOLUTION: Ok Tôi tạo ra một dự án góc-cli và lần này con đường đã làm việc với router.navigate(['/testroutes') và CŨNG với http://localhost:4200/testroutes/ Vì vậy, tôi tách tuyệt đối vào 2 và cẩn thận xem xét cho một sự khác biệt và tôi thấy <base href="./"> này khác nhau để <base href="/"> Một dấu chấm đơn giản đã gây ra lỗi. Khi tôi nhân bản dự án, dấu chấm ở đó hoặc tôi đã đặt nó ở đó vì một lý do kì lạ nào đó mà tôi không biết. Hy vọng điều này sẽ giúp một ai đó.

Answer 1

Ok, tôi đã tạo ra một dự án angular-cli và lần này tuyến đường đang làm việc với router.navigate(['/testroutes') và CSONG với http://localhost:4200/testroutes/ Vì vậy, tôi đã chia tách tuyệt vời trong 2 và cẩn thận tìm kiếm sự khác biệt và tôi thấy điều này là một số lỗi đơn giản. Khi tôi nhân bản dự án, dấu chấm ở đó hoặc tôi đã đặt nó ở đó vì một lý do kì lạ nào đó mà tôi không biết. Hy vọng điều này sẽ giúp một ai đó.

Answer 2

Nó không phải là 100% rõ ràng từ câu hỏi nhưng tôi giả định tất cả các thành phần được xác định trong một đơn AppModule?

Tôi nghĩ bạn có thể đơn giản hóa việc định tuyến của bạn một chút:

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

SiteComponent mẫu sẽ cần phải có một <router-outlet> cho con đường con ('portafolio /: id')