Javascript 如何在angular 6中将值从同级组件传递到路由器出口？

app.component.html：

<app-navbar>...router links here</app-navbar>
<app-controller>...contains multiple inputs</app-controller>
<router-outlet>... renders n pages </router-outlet>

…路由器链接在此
…包含多个输入
... 呈现n页

如何在

子页面中使用

组件（可由用户更改）中的动态数据？

控制器组件

构建需要在所有页面上共享的数据。每个页面根据控制器组件数据呈现不同形式的表

我尝试了

eventEmitter

和

@input

@outputs

但为父母和孩子工作，而不是为这个层次结构工作。对于动态数据，使用服务也不起作用。我不确定这种要求的基准是什么

---

为了在angular.js中实现这一点，我将在每个页面组件中包含控制器组件，并通过

$rootScope

传递其数据，如果我想看到它们发生了变化，则添加

$rootScope.$watch

您可以从RX js开始使用主题或行为主题，如果您可以一次更新多个组件的数据，请查找少数示例

// Behavior Subject

// a is a initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription wont get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d

---

为此使用服务。在需要共享数据的所有页面中使用它，并在

app.component

中提供它，因此控制器和

render outlet

将共享相同的服务实例

在应用程序组件中：

@Component({
  ...,
  provide: [SharedDataService],
})
export class AppComponent {
}

在儿童中：

constructor(
  sharedDataService : SharedDataService,
) { }

---

这就是Angular建议如何处理组件之间的通信。

控制器具有动态数据。您的代码仅共享静态数据。您可以在服务中使用

行为子对象

交换数据，以将数据从

控制器

组件发送到

渲染出口