如何实现嵌套二级路由并仍然从子级获取数据?角度6 [英] How to implement nested secondary routing and still get the data from child? Angular 6

问题描述

我的目标是将数据从被路由的子级发送到父级.我想从子级获取变量的引用，该子级嵌套在子级中，通过辅助路由将其引用给父级，以便将变量同步到父级.该变量最终将是表单验证状态的布尔值.不幸的是，当我使用行为主题时，我认为我必须使用组件选择器，该选择器似乎不能很好地与应用程序中的路由配合使用.

My goal is to send data from a routed child to the parent. I want to get the reference of a variable from the child, which is nested within a child to the parent through secondary routes so that the variable is synced to the parent. This variable will eventually be the boolean of a form validation state. Unfortunately, when I use Behavior Subject I think I have to use the component selector which seems not to play nicely with the routes in my application.

这是来自应用程序模板的示例... 看来，当我添加app-new-user组件选择器时，它会拧紧名为router outlet的newuserinput:(

This is a sample from the template of the application... It seems when I add the app-new-user component selector it screws up the newuserinput named router outlet :(

<!-- To BLADE LAYER 3 -->
<router-outlet></router-outlet>
<!-- <router-outlet name="newuserinput" (newUserInfoCompleteEvent)="receiveNewUserInfoComplete($event)"></router-outlet> -->
<router-outlet (activate)='getVState($event); ' name="newuserinput"></router-outlet>
<router-outlet name="newuserorginfo"></router-outlet>
<router-outlet name="newusersupervisorinfo"></router-outlet>
<router-outlet name="newusersecurityinfo"></router-outlet>
<!-- end -->



<!-- For ViewChild: bringing form validity state from child -->
<!-- <app-new-user-input style="display:none;"></app-new-user-input> -->
<!-- can't do this because putting the child component selector in the parent disables the childs router outlet -->

在我准备的我的 stackblitz原型中，子结构/父结构是成功地与服务合作以显示所需的信息；但是，一旦我用命名路由替换了parent(app-component)中的组件选择器(就像我在上面提供的我的应用程序片段中一样)，就会中断.此原型的目标是在父级上显示来自第二个子节点的Hello"，并在地址栏中正确显示第二个路由路由参数，如下所示: https://behavior-subject-0007.stackblitz. io/(child:child/(secondarychild:secondarychild))

In mystackblitz prototype that I have prepared, the child/parent structure is successfully working with the service to display the desired information; however, as soon as I replace the component selectors in the parent(app-component) with named routes (like in the snippet of my application that I provided above) this breaks. My goal for this prototype is to display 'Hello from secondary child' on the parent with the secondary routing route params being properly displayed in the address bar like this: https://behavior-subject-0007.stackblitz.io/(child:child/(secondarychild:secondarychild))

我的问题:那么，我该如何实现嵌套的辅助路由并仍然通过引用从子级到父级获取数据，以便地址栏显示为

My question: So, how do I implement nested secondary routing and still get the data by reference from child to parent so that the address bar displays like this https://behavior-subject-0007.stackblitz.io/(child:child/(secondarychild:secondarychild))?

我可以为此使用行为主题还是有更好的方法?我当时正在考虑尝试实现 AJ2_82的解决方案.

Can I use Behavior Subject for this or is there a better way? I was thinking about trying to implement AJ2_82's solution.

我还通过使用组件宿主元数据来研究路由子组件上的简单属性绑定...

I was also looking into simple property binding on the routed child component by using the components host metadata...

我对编程还比较陌生，因此可能会有一个显而易见的"解决方案，感谢您可以提供的任何帮助.

I'm relatively new to programming so there could be an 'obvious' solution, thanks for any help you can provide.

如果您共享满足相同要求的方式(命名路由器出口地址和通过引用从子代到父代的数据)，我将不知所措.谢谢.

If you share YOUR way that would satisfy the same requirements (named router outlet address and data by reference from child to parent) I am all ears. Thank you.

推荐答案

问题的众多解决方案之一是使用

One from many outlets to the problem is to use events , load an event emitter to your shared service public onChange: EventEmitter<string> = new EventEmitter<string>(); then brodcast it from the parent to its children, or counterwise, like this

changeMessage(message: string) {
    this.currentMessage = of(message)
    this.onChange.emit(message); 
  }

在每次需要的组件加入通信配置单元时，请通过以下服务添加事件捕获器:this.myService.onChange.subscribe(message=> this.message = message);

In each occurence when a desired component you want it to join the communicative hive, add an event catcher from this service: this.myService.onChange.subscribe(message=> this.message = message);

通过这种方式，您可以实施外向"但功能齐全的方法，以在路线之间实时共享数据.

This way you could implement an "outward" but complete functional approach to share data at real time between routes.

参见此示例. 或者您可以看到此实现稍有不同合并同级组件和路由.

see this sample. Or you can see this slightly different implementation that merges sibling components and routes.

或者您可以使用特殊路线参数

通过这种方式，您将不允许来自另一个共存层次结构的任何外部组件干扰在已定义的路由模块之间交换的这些内部消息，因为您不小心在它们之间传递了这些消息.

By this way you wouldn't allow any foreign component from another coexistant hierarchy to interfer in these inner messages exchanged between a defined module of routes, because you are underhandedly passing them inbetween.

您可以通过以下方式配置模块:

You would configure the module this way:

export const routes: Routes = [
  { path: '', redirectTo: 'component-one/:message', pathMatch: 'full' },
  { path: 'component-one/:message', component: ComponentOne },
  { path: 'component-two/:message', component: ComponentTwo,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one/:message', component: ChildOne },
      { path: 'child-two/:message', component: ChildTwo }
    ]
  }
];

因此，每次调用这些关联之一时，都会在组件的html核心中使用一些参数.

So that each call to one of those filiations accompanies some parameter to be used in the component html core of which.

在下面的示例中，我将函数调用中的参数设置为可选，以告诉它是否是由组件加载触发的，因此是重新生成的，尽管它源自单击按钮，因此只是分别更新为某些自定义部分.

In the following example, I made the parameter in function call optional to tell if it was triggered from a component load, thus regenerated, neverthless it originates from a button click, hence just updated respectively to some custom parts.

newMessage(param?) {

    if(typeof(param) === 'undefined')
       this.message = "Parent";
    else
       this.message = param;

    var actualroute=this.router.routerState.snapshot._root.children[0].children[0].value.url[0].path;
    this.router.navigate(['/component-two', this.message , actualroute, this.message  ],{relativeTo: this.route});   
}

您可以在此处.谢谢您的有趣挑战.

You can see it all working here. Thank you for this fun-challenge.

弱点:每次对变量message进行更新时，路由器都会继续导航到同一层次结构，这会花费时间，尤其是对于较大的实现而言.

Weak spot: At each update of the variable message, the router proceeds to navigate all over again to the same hierarchy which costs time especially for bigger implementations.

要点:调用router.navigate时，可以在组件之间传递自定义数据，例如，在一行中为孩子说'mesage1'，为父母说'message2':.可以使用服务来完成此操作，但操作非常复杂且条件复杂.

Strong point: When you call a router.navigate there is ability to pass custom data between components, say 'mesage1' for a child and 'message2' for a parent in one row: this.router.navigate(['/component-two', 'message2' , 'child-one', 'message1']);. This can be done but very complicatedly and condition-entangledly using a service.

这篇关于如何实现嵌套二级路由并仍然从子级获取数据?角度6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！