从主导航菜单直接链接到父+子视图/控制器 [英] Linking directly to both parent+child views/controllers from the main navigation menu

问题描述

考虑这个例子：

主路由器位于

app.js

• someparent / childroute1


• someparent / childroute2


• route3

someparent是基本控制器和视图。它在视图中有一些可重用的html标记，自定义元素和绑定，将由其所有子视图和控制器共享。子视图和控制器将访问这些。

在someparent.html内部（除了共享标记）还有一个< router-view> ; 标签，其中子路线和页面应该在里面呈现，但someparent.html内没有导航。

从主路由器/ app.js中的路由应该可以单击一个链接并登陆 - 不是在父/基类someparent本身，而是直接在someparent基本/父视图和控制器的子项上， ，当你点击app.html导航菜单中的一个链接时，app.html建立在app.js中的路径（也许someparent.js中的路由注入父路由器中的子路由器或什么？）。

所以基本上我需要的是实现与基本路由几乎相同的东西 - 但正如我所提到的，我需要将这些路由/页面中的多个作为父视图/控制器的部分。我几乎没有找到任何关于谷歌搜索的信息，所以希望这里有人能够理解我的要求，并想知道如何在奥里利亚以正确的方式解决这个问题？

解决方案

创建一个用于包含共享状态的类，并在视图模型中依赖于该类。您可以使用 NewInstance.of 解析程序来控制何时创建共享状态与重用。

这里是例如：

shared-state.js

  export class SharedState {
 fromdate =''; 
 todate =''; 
 language ='English'; 
} 
  

shared-parent.js

 从'aurelia-framework'导入{inject，NewInstance};来自'./shared-state'的
 import {SharedState}; 
 
 @inject（NewInstance.of（SharedState））//<  - 这表示每当创建SharedParent实例时都创建一个新的SharedState实例
 export class SharedParent {
构造函数（状态）{
 this.state = state; 
} 
 
 configureRouter（config，router）{
 config.title ='Aurelia'; 
 config.map（[
 {route：[''，'child-a']，moduleId：'。/ child-a'，nav：true，title：'Child A'}，
 {route：'child-b'，moduleId：'。/ children-b'，nav：true，title：'Child B'}，
]）; 
 
 this.router = router; 
} 
} 
  

注意：如果你使用 @inject（SharedState）而不是 @inject（NewInstance.of（SharedState））， SharedState 将与所有组件共享。这可能是你正在寻找的，我不确定。 @inject（NewInstance.of（SharedState））的目的是确保父母及其子女拥有自己的 SharedState 实例。

child-a.js

 从'aurelia-framework'导入{inject};来自'./shared-state'的
 import {SharedState}; 
 
 @inject（SharedState）
导出类ChildA {
构造函数（状态）{
 this.state = state; 
} 
} 
  

child-b.js

 从'aurelia-framework'导入{inject};来自'./shared-state'的
 import {SharedState}; 
 
 @inject（SharedState）
导出类ChildB {
构造函数（状态）{
 this.state = state; 
} 
} 
  

Consider this example:

The main router is located in

app.js

• someparent/childroute1
• someparent/childroute2
• route3

"someparent" is the "base controller and view". It has some reusable html markup in the view, custom elements and bindings which is to be shared by all its "child views and controllers". The child views and controllers will access these.

Inside "someparent.html" there's (besides the shared markup) also a <router-view> tag, in which the child routes and pages should be rendered inside, but there's no navigation inside someparent.html.

From the main router/routes in app.js it should be possible to click a link and land - not on the parent/base class "someparent" itself, but directly on the children of the "someparent" "base/parent views and controllers", rendering both, when you click a link in the navigation menu of app.html built from the routes in app.js (and maybe routes in someparent.js injecting the child router in the parent or what?).

So essentially what I need is to achieve almost the same thing as basic routing - but as I mentioned I need to have multiple of these routes / pages as partials of a parent view/controller. I couldn't find any info on this from googling extensively for weeks, so hopefully someone in here will be able to understand what I ask, and have an idea of how to go about this in Aurelia, the right way?

解决方案

Create a class to contain your shared state and take a dependency on that class in your view-models. You can use the NewInstance.of resolver to control when shared state is created vs reused.

Here's an example: https://gist.run?id=4cbf5e9fa71ad4f4041556e4595d3e36

shared-state.js

export class SharedState {
  fromdate = '';
  todate = '';
  language = 'English';
}

shared-parent.js

import {inject, NewInstance} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(NewInstance.of(SharedState)) // <-- this says create a new instance of the SharedState whenever a SharedParent instance is created
export class SharedParent {
  constructor(state) {
    this.state = state;
  }

  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
        { route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
    ]);

    this.router = router;
  }
}

note: if you use @inject(SharedState) instead of @inject(NewInstance.of(SharedState)), a single instance of SharedState will be shared with all components. This may be what you are looking for, I wasn't sure. The purpose of @inject(NewInstance.of(SharedState)) is to make sure the parent and it's children have their own SharedState instance.

child-a.js

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildA {
  constructor(state) {
    this.state = state;
  }
}

child-b.js

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildB {
  constructor(state) {
    this.state = state;
  }
}

这篇关于从主导航菜单直接链接到父+子视图/控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！