transitionToRoute（'route'）從內部組件

如何從組件動作中實用地過渡到路徑？transitionToRoute（'route'）從內部組件

我試過使用@get('controller').transitionToRoute('images')，但控制器指的是組件本身。我知道組件應該是自包含的，所以我應該使用視圖而不是更好地與控制器/路由進行交互？

例

App.ImageEditorComponent = Ember.Component.extend 
    ... 
    actions: 
    delete: -> 
     App.Files.removeObject(object) 
     @transitionToRoute('images') # This throws an exception 
    ...

來源

2014-03-13 al3xnull

我覺得這個想法是，一個組件不應該知道主機控制器的動作。您可能想要發送消息。 – aceofspades

@aceofspades很可能。到目前爲止，我已經理解了視圖可能知道控制器，但控制器可能不知道Ember中的視圖。你能給我舉一個例子作爲答案嗎？好奇這將如何工作;有一個模糊的想法。 – al3xnull

@aceofspades假設你的意思是[this]（http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/），那麼我想我可以代替'currentControllerBinding'設置一個'fileDeletedAction'然後'this.sendAction（'fileDeletedAction'）'。 – al3xnull

Ember.component.sendAction

創建父控制器上的行動。

export default Ember.Controller.extend({ 
    actions: { 
    transInController() { 
     this.transitionToRoute('home') 
    } 
    } 
});

在組件調用中指定此操作。

{{some-component transInComponent=(action "transInController")}}

從組件「發送操作」達控制器

export default Ember.Component.extend({ 
    actions: { 
     componentAction1() { 
      this.sendAction('transInComponent'); 
     } 
    } 
});

來源

2017-08-29 08:42:19

我會進一步改變這個選項以包含選項，以決定將選項轉換到哪裏，但這是Ember現在的正確答案。 – al3xnull

你可以在經由結合，然後訪問它的部件內部，像這樣通過控制器：

{{image-editor currentControllerBinding="controller"}} 

App.ImageEditorComponent = Ember.Component.extend 
    ... 
    actions: 
    delete: -> 
     App.Files.removeObject(object) 
     @get('currentController').transitionToRoute('images') 
    ...

來源

2014-03-13 19:51:09 chopper

Ember 1.8.1適合我。 –

這不是我尋找的正確的awnser。也許有另一種方式。 – heat

使用Ember 2.6.0沒有工作 –

A組分假定從它的上下文中分離，所以雖然你可以傳入對控制器的引用，但這可能超出了組件的範圍。您可能想要堅持使用具有自己的控制器的視圖。退房Views Over Components - An Ember Refactoring Story。

從Ember.js，Sending Actions from Components to Your Application，討論關於從組件向路徑層次結構發送操作的討論。

來源

2014-03-16 04:26:50 aceofspades

在component.HBS組件文件做出 {{#link-to "routeDestinationYouWant" }}

例如：

<section class="component"> 
{{#link-to "menu.shops.category.content" "param"}} 
     <figure id="{{Id}}" class="list-block yellow-bg text-center" {{action "showList" "parameter"}}> 
      <section class="list-block-icon white-text my-icons {{WebFont}}"></section> 
      <figcaption class="list-block-title black-text">{{{Title}}}</figcaption> 
     </figure> 
      {{/link-to}} 
</section>

來源

2016-04-27 13:41:41 mEnE

鏈接組件無法應用於簡單跨度的點擊。我在這裏面臨同樣的問題。我怎麼能從組件行爲轉移到另一條路線？ – heat

適用於我：D。 @heat我只是使用普通的''，並在按鈕周圍封裝一個'{{＃link-to'route-name'}} {{/ link-to}}'，然後使用CSS來設置按鈕的樣式就像一個文本標籤或跨度，很好很簡單。 – Zhang

我寫這個答案另一個類似的問題。

如果希望只在特定組件或服務或控制器使用路由器，你可以試試這個：

初始化與私營服務-routing的屬性。 - 因爲它還不是公共API。

router: service('-routing'),

然後裏面的服務或組件內部的任何操作方法或其他功能：

this.get('router').transitionTo(routeName, optionalParams);

注：這將是在控制器transitionToRoute。

鏈接問題：Ember transitionToRoute cleanly in a component without sendAction

鏈接回答：https://stackoverflow.com/a/41972854/2968465

來源

2017-03-19 11:21:39

很多事情，因爲原帖在灰燼改變。所以也許今天最好的選擇是傳遞給組件一個路徑動作，照顧過渡（可能使用花式插件ember-cli-route-action。

否則，您可以創建一個初始化與ember g initializer router和裏面放有一個像這樣的代碼一個

export function initialize (application) { 
    application.inject('route', 'router', 'router:main') 
    application.inject('component', 'router', 'router:main') 
} 

export default { 
    name: 'router', 
    initialize 
}

這樣你就可以用this.get('router')訪問路由器在您的組件，並且例如，執行過渡

this.get('router').transitionTo('images')

來源

2017-03-25 00:15:52

transitionToRoute（'route'）從內部組件

回答

相關問題