如果两个不同的组件在同一个视图(ngRoute)中，它们如何共享一个公共对象或通信? [英] If two different components are in the same view (ngRoute), how can they share a common object or communicate?

问题描述

在 AngularDart 中，我有一个视图.

In AngularDart I have a view.

https://angulardart.org/tutorial/08-ch06-view.html

'demo_table': ngRoute(
path: '/demo/table',
view: 'views/demotable.html'
),

在视图上，我有两个组件.

On the view I have two components.

<component1 view-string="Component 1"></component1>
<component2 view-string="Component 2"></component1>

我希望 view-string 是一个可以被 component1 或 component2 改变的字符串的实例.更改应反映在组件中字符串的显示中.

I would like view-string to be an instance of a string which may be changed by either component1 or component2. The changes should be reflected in the display of the string in the component.

我不知道如何在此视图中保留字符串，因为此视图不是组件.如果这个视图确实是一个带有 dart 对象的组件，我通常会在视图字符串中使用{{someString}}".

I don't see how to keep a string within this view, as this view is not a component. Usually I would use a "{{someString}}" in the view-string if this view was really a component with a dart object.

推荐答案

解决问题并仍然使用组件而不是控制器的一种方法是引入一个包含共享数据的类.事实上，这也与控制器完全相同，但这是一个有争议的问题，因为控制器似乎就像 Randal 提到的那样消失了.

One way to solve the problem and still use components as opposed to controllers is to introduce a class that contains your shared data. In fact, this also works exactly the same with controllers, but that's a moot point because controllers seem to be going away as Randal mentioned.

(请原谅任何错别字或错误 - 我直接在文本编辑器中输入，所以这可能无法编译.)

步骤 1: 引入一个共享类，将其注释为 Injectable:

Step 1: Introduce a shared class, annotate it as Injectable:

@Injectable()
class MySharedClass
{
  String mySharedVariable;
}

第 2 步:通过告诉 Angular 来确保 Angular 可以注入该类:

Step 2: Make sure that that Angular can inject the class by telling Angular about it:

class MyInitModule extends Module {
  MyInitModule() {

    // Your bindings ...
    // Your components, controllers are bound for Angular's DI

    // This is the important part:
    bind(MySharedClass);

    // Typical Angular.Dart bindings:  
    bind(RouteInitializerFn, toValue: yourRouteInitializer);
    bind(NgRoutingUsePushState, toFactory: (_) => 
         new NgRoutingUsePushState.value(false));
}

main() {
  applicationFactory().addModule(new MyInitModule()).run();
}

第 3 步:现在将共享类添加到组件的构造函数中.只要你声明一个实例，Angular 就会自动注入它:

Step 3: Now add the shared class to your components' constructors. Angular will automatically inject an instance as long as you declare a requirement for it:

@Component(
  selector: 'componentA',
  templateUrl: 'correct_path', // insert correct value here.
  publishAs: 'cmp')
class ComponentA {

  MySharedClass sharedClass;

  ComponentA(this.sharedClass) {
}

@Component(
  selector: 'componentB',
  templateUrl: 'correct_path', // insert correct value here.
  publishAs: 'cmp')
class ComponentB {

  MySharedClass sharedClass;

  ComponentB(this.sharedClass) {
}

现在您可以根据需要访问两个(或多个)组件之间的共享类.

And now you have access to your shared class between the two (or more) components as you see fit.

(根据 Wilson Yeung 进行修改以添加 Injectable() 注释)

(Modified per Wilson Yeung to add Injectable() annotation)

这篇关于如果两个不同的组件在同一个视图(ngRoute)中，它们如何共享一个公共对象或通信?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！