如何实现嵌套二级路由，仍然从child获取数据？ Angular 6

Question

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

这是应用程序模板中的示例... 似乎当我添加 app-new-user 组件选择器时，它搞砸了名为 router outlet 的 newuserinput :(

<!-- 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 prototype中，child/parent结构成功地与服务一起工作以显示所需的信息；但是，一旦我将 parent(app-component) 中的组件选择器替换为命名路由（就像我在上面提供的应用程序片段中那样），就会中断。我对这个原型的目标是在 parent 上显示 'Hello from secondary child'，同时在地址栏中正确显示辅助路由参数，如下所示： https://behavior-subject-0007.stackblitz.io/(child:child/(secondarychild:secondarychild))

我的问题：那么，如何实现嵌套二级路由，并且仍然通过引用获取从child到parent的数据，以便地址栏显示成这样https://behavior-subject-0007.stackblitz.io/(child:child/(secondarychild:secondarychild))？

我可以为此使用 Behavior Subject 还是有更好的方法？我正在考虑尝试实施 .

我也在研究使用组件主机元数据在路由 child 组件上进行简单属性绑定...

我对编程比较陌生，所以可能会有一个 'obvious' 解决方案，感谢您提供的任何帮助。

如果您分享满足相同要求的方式（通过引用从 child 到 parent 命名路由器出口地址和数据），我洗耳恭听。谢谢。

Answer 1

许多渠道的一个问题是使用 events ，将事件发射器加载到您的共享服务 public onChange: EventEmitter<string> = new EventEmitter<string>(); 然后将其从 parent 广播到其 children，或者逆向，像这样

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

在每次需要的组件加入通信配置单元时，从该服务添加一个事件捕获器：this.myService.onChange.subscribe(message=> this.message = message);

通过这种方式，您可以实现 "outward" 但完整的功能方法，以在路由之间实时共享数据。

see this sample。或者你可以看到 this slightly different implementation 合并了同级组件和路由。

或者你可以使用特殊的路由参数

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

您可以这样配置模块：

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 核心中使用的参数。

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

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});   
}

您可以看到一切正常 here。谢谢你 fun-challenge.

弱点：在变量 message 的每次更新中，路由器都会重新导航到相同的层次结构，这会花费时间，尤其是对于更大的实现。

强项：当您调用 router.navigate 时，可以在组件之间传递自定义数据，比如 'mesage1' 用于 child 'message2' 一行 parent：this.router.navigate(['/component-two', 'message2' , 'child-one', 'message1']);。这可以完成，但非常复杂，并且 condition-entangledly 使用服务。

如何实现嵌套二级路由，仍然从child获取数据？ Angular 6

How to implement nested secondary routing and still get the data from child? Angular 6

rxjs

behaviorsubject

angular-ui-router

angular