Question

在AngularDart中我有一个观点。

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

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

在视图中我有两个组件。

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

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

我没有看到如何在此视图中保留字符串，因为此视图不是组件。通常我会在视图字符串中使用“{{someString}}”，如果这个视图实际上是一个带有dart对象的组件。

Answer 1

解决问题并仍使用组件而不是控制器的一种方法是引入包含共享数据的类。事实上，这也与控制器完全相同，但这是一个没有实际意义的点，因为控制器似乎正在像Randal所说的那样消失。

（请原谅任何拼写错误或错误 - 我正在输入文本编辑器，因此可能无法编译。）

第1步：引入共享类，将其注释为Injectable：

@Injectable()
class MySharedClass
{
  String mySharedVariable;
}

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

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就会自动注入一个实例：

@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) {
}

现在，您可以根据需要访问两个（或更多）组件之间的共享类。

（根据Wilson Yeung修改添加Injectable（）注释）

Answer 2

我找到的解决方案是使用控制器，在我看来我可以{{ctrl.test}}来查看控制器字符串。

控制器。

library some_library;

import 'package:angular/angular.dart';

@Controller(
    selector: '[some-controller]',
    publishAs: 'ctrl')
class SomeController {
  @NgTwoWay("test")
  String test = "TEST";
}

在视图中，添加控制器。

<div teacher-controller> etc...

Answer 3

Greg Sherman使用MySharedClass的答案是正确的，但缺少@Injectable（）注释。你需要这样的东西：

import 'package:angular/angular.dart';

@Injectable()
class MySharedClass {
  String mySharedVariable;
}

如果两个不同的组件在同一视图（ngRoute）中，它们如何共享一个共同对象或进行通信？

3 个答案: