Truy cập tên tuyến hiện tại từ bộ điều khiển hoặc thành phần

Question

Tôi cần áp dụng lớp "hoạt động" vào tab bootstrap tùy thuộc vào tên tuyến hiện tại. Đối tượng tuyến đường chứa "routeName" nhưng làm cách nào để tôi truy cập điều này từ bộ điều khiển hoặc thành phần?

Answer 1

cho Ember 2, từ một bộ điều khiển bạn có thể thử:

appController: Ember.inject.controller('application'), 
currentRouteName: Ember.computed.reads('appController.currentRouteName') 

Sau đó, bạn có thể vượt qua nó để thành phần.

Answer 2

Trong trường hợp tuyệt đối tuyệt đối, bạn có thể tra cứu bộ định tuyến hoặc bộ điều khiển ứng dụng (hiển thị thuộc tính 'currentRouteName') qua this.container.lookup("router:main") hoặc this.container.lookup("controller:application") từ bên trong thành phần.

Nếu đó là xu hướng chung đối với tôi, tôi sẽ tạo CurrentRouteService và đưa nó vào thành phần của tôi để tôi có thể thử nghiệm dễ dàng hơn trong các thử nghiệm của tôi.

Cũng có thể có một câu trả lời tốt hơn để đi cùng - nhưng container.lookup() sẽ loại bỏ trình chặn hiện tại của bạn.

Answer 3

Sử dụng số này this.controllerFor('application').get('currentRouteName');

Answer 4

Hãy thử điều này.

export default Ember.Route.extend({ 
 
    routeName: null, 
 
    
 
    beforeModel(transition){ 
 
    //alert(JSON.stringify(transition.targetName) + 'typeof' + typeof transition.targetName); 
 
    this.set('routeName', transition.targetName); 
 
    }, 
 
    model(){ 
 

 
    // write your logic here to determine which one to set 'active' or pass the routeName to controller or component 
 
    }

'

Answer 5

Trong thực tế, bạn không cần phải áp dụng lớp hoạt động một mình. Một người trợ giúp link-to sẽ làm điều đó cho bạn.

Xem here:

{{link-to}} sẽ áp dụng một tên lớp CSS của 'hoạt động' khi tuyến đường hiện tại của ứng dụng phù hợp với routeName cung cấp. Ví dụ, nếu tuyến đường hiện tại của ứng dụng là 'photoGallery.recent' việc sử dụng sau đây của {{link-to}}:

{{#link-to 'photoGallery.recent'}} 
    Great Hamster Photos 
{{/link-to}} 

sẽ dẫn đến

<a href="/hamster-photos/this-week" class="active"> 
    Great Hamster Photos 
</a> 

Answer 6

Sử dụng thông tin chi tiết từ câu trả lời của @ maharaja-santhir, người ta có thể nghĩ đến việc đặt thuộc tính routeName trên bộ điều khiển đích để sử dụng, ví dụ: trong mẫu của mục tiêu. Bằng cách này, không cần xác định logic ở nhiều vị trí và do đó có thể sử dụng lại mã. Dưới đây là một ví dụ về làm thế nào để thực hiện điều đó:

// app/routes/application.js 
export default Ember.Route.extend({ 
    ... 

    actions: { 
     willTransition(transition) { 
      let targetController = this.controllerFor(transition.targetName); 
      set(targetController, 'currentRouteName', transition.targetName); 
      return true; 
     } 
    } 
}); 

Xác định willTransition hành động này trong con đường ứng dụng cho phép tuyên truyền tên tuyến đường hiện tại để bất cứ nơi nào trong ứng dụng. Lưu ý rằng bộ điều khiển đích sẽ giữ nguyên cài đặt thuộc tính currentRouteName ngay cả sau khi điều hướng đến một tuyến đường khác. Điều này yêu cầu dọn dẹp thủ công, nếu cần thiết, nhưng nó có thể chấp nhận được tùy thuộc vào trường hợp triển khai và sử dụng của bạn.