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

问题描述

在AngularDart我有一个视图。

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

 ' demo_table'：ngRoute（
 path：'/ demo / table'，
 view：'views / demotable.html'
），
  pre> 
 
 
在视图上有两个组件。
  component1 view-string =Component 1>< / component1> 
< component2 view-string =Component 2>< / component1> 
  
我希望view-string是一个字符串的实例，可以通过component1或组件2。更改应反映在组件中字符串的显示中。
 
 
 
我看不到如何在此视图中保留字符串，因为此视图不是零件。通常我会在视图字符串中使用{{someString}}，如果这个视图真的是一个dart对象的组件。
解决方案
解决问题并仍然使用组件而不是控制器的一种方法是引入一个包含您的共享数据的类。事实上，这也与控制器完全相同，但这是一个疑问点，因为控制器似乎正在消失，如Randal提到的。 
 
 
 
 （请勿输入任何错字或错误 - 我正在直接在文字编辑器中输入，因此无法编译。） > 
 
 
 步骤1：引入共享类，注释为可注入：
  @Injectable（）
类MySharedClass 
 {
 String mySharedVariable; 
} 
  
 第2步：通过告诉Angular注入类：
  class MyInitModule extends Module {
 MyInitModule （）{
 
 //您的绑定... 
 //您的组件，控制器绑定Angular的DI 
 
 //这是重要的部分：
 bind（MySharedClass）; 
 
 //典型的Angular.Dart绑定：
 bind（RouteInitializerFn，toValue：yourRouteInitializer）; 
 bind（NgRoutingUsePushState，toFactory：（_）=> 
 new NgRoutingUsePushState.value（false））; 
} 
 
 main（）{
 applicationFactory（）。addModule（new MyInitModule（））run（）; 
} 
  
 第3步：你的组件的构造函数。 Angular将自动注入一个实例，只要你声明一个需求为它：
  @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' ，//在这里插入正确的值
 publishAs：'cmp'）
 class ComponentB {
 
 MySharedClass sharedClass; 
 
 ComponentB（this.sharedClass）{
} 
  
 
 
 
 
（根据Wilson Yeung修改以添加Injectable（）注释）
 p> 
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>
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.

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.
解决方案
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. 

(Please pardon any typos or errors - I'm typing right into the text editor, so this may not compile.)

Step 1: Introduce a shared class, annotate it as Injectable:
@Injectable()
class MySharedClass
{
  String mySharedVariable;
}
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();
}
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.

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

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