Question

我定义了一个 angular.dart组件，如下所示：

@NgComponent(
    selector: 'dartcomp',
    templateUrl: 'dartComp.html',
    publishAs: 'ctrl',
    map: const
    { 
      'val' : '@val'
    }
)
class DartComp
{ 
  String val;
  calc(a,b) =>a+b;
}

HTML 中的用法是：

<dartcomp id="dc"></dartcomp>

如何从主dart
访问angular.dart组件的属性val或方法calc（）
调用组件，如

querySelector("#dc").val = "Frank";

掷：

Class'UnknownElement'没有实例setter'val ='。

NoSuchMethodError : method not found: 'val=' Receiver: Instance of 'UnknownElement' Arguments: ["Frank"]

错误是什么？

Answer 1

访问类属性等属性适用于Polymer，但不适用于Angular.Dart。您必须使用Elements默认方法.attributes['attrName'] = value

// this doesn't work with Angular
//    querySelector("#dc").attributes['val'] = "Frank";

// I found an AngularDart function that may help but it's comment says this is for debugging only
// this example calls the method 'add' on MyComponent
  var mc = ngProbe(dom.querySelector('my-component')).directives.firstWhere((d) => d is MyComponent);
  mc.add('someValue');

也许有一种更好的方式我不知道，但这种方式应该无论如何都可以。

在Angular组件/控制器上调用方法的解决方法

此处也提供了示例： GitHub BWU-Dart Playground

这是我想出的最好的主意。也许AngularDart创作者中的某个人知道更好的解决方案。（我也找不到AngularJS的直接解决方案）

<强> EventBus

/**
 * Derived from https://github.com/marcojakob/dart-event-bus
 */

library eventbus;

import "dart:async";
import "dart:html";

import "package:logging/logging.dart";

/**
 * [EventBus] is a central event hub.
 * In addition it automatically updates the page navigation history ([History]
 * by calling [window.pushState] for fired events which indicate, that they
 * are supposed to update the [History] and refiring events which led to
 * [window.pushState] in the case of a [window.onPopState] event.
 */
class EventBus extends Object {
  final _logger = new Logger("EventBusModel");

  /**
   * A [StreamController] is maintained for each event type.
   */
  Map<EventType, StreamController> streamControllers = new Map<EventType, StreamController>();

  bool isSync = true;

  /**
   * Constructs an [EventBus] and allows to specify if the events should be
   * send synchroniously or asynchroniously by setting [isSync].
   */
  EventBus({this.isSync : false});

  /**
   * [on] allows to access an stream for the specified [eventType].
   */
  Stream/*<T>*/ on(EventType/*<T>*/ eventType) {
    _logger.finest('on');

    return streamControllers.putIfAbsent(eventType, () {
      return new StreamController.broadcast(sync: isSync);
      }
    ).stream;
  }

  /**
   * [fire] broadcasts an event of a type [eventType] to all subscribers.
   */
  void fire(EventType/*<T>*/ eventType, /*<T>*/ data) {
    _logger.finest('event fired: ${eventType.name}');

    if (data != null && !eventType.isTypeT(data)) {
      throw new ArgumentError('Provided data is not of same type as T of EventType.');
    }

    var controller = streamControllers[eventType];
    if (controller != null) {
      controller.add(data);
    }
  }
}

/**
 * Type class used to publish events with an [EventBus].
 * [T] is the type of data that is provided when an event is fired.
 */
class EventType<T> {

  String name;

  /**
   * Constructor with an optional [name] for logging purposes.
   */
  EventType(this.name);

  /**
   * Returns true if the provided data is of type [T].
   *
   * This method is needed to provide type safety to the [EventBus] as long as
   * Dart does not support generic types for methods.
   */
  bool isTypeT(data) => data is T;
}

带有 MyComponent 和 main（）

的

index.dart

library main;

import 'dart:html' as dom;
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:di/di.dart';

import 'event_bus.dart';

class Item {
  String name;
  Item(this.name);
}

@NgComponent(
    selector: 'my-component',
    publishAs: 'ctrl',
    applyAuthorStyles: true,
    template: '''<div ng-repeat="value in ctrl.values"><span>{{value.name}}</span> - <content><content></div>'''
)

class MyComponent {
  List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];

  void add(String value) {
    values.add(new Item(value));
  }

  EventBus _eb;

  MyComponent(this._eb) {
    print('MyComponent');
    _eb.on(Events.someEvent).listen((e) => add(e));
    _eb.on(Events.someEventWithData).listen((SomeEventData ed) {
      print('Event received from ${ed.senderId}');
      ed.respond(this);
    });
  }
}


typedef MyComponentEventResponse (MyComponent component);
class SomeEventData {
  SomeEventData(this.respond, this.someOtherData, [this.senderId]);
  MyComponentEventResponse respond;
  var someOtherData;
  String senderId;
}

class Events {
  static final EventType<String> someEvent = new EventType<String>("someEvent");
  static final EventType<SomeEventData> someEventWithData = new EventType<SomeEventData>("someEventWithData");
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MyComponent);
    value(EventBus, new EventBus());
  }
}

void main() {
  Injector inj = ngBootstrap(module: new MyAppModule());

  EventBus eb = inj.get(EventBus);

  eb.fire(Events.someEvent, "17");
  new Timer(new Duration(milliseconds: 1000), () => eb.fire(Events.someEvent, "33"));
  new Timer(new Duration(milliseconds: 2000), () => eb.fire(Events.someEventWithData, new SomeEventData(respond, 'blabla', 'main105')));
}

void respond(MyComponent c) {
  dom.window.alert('Demonstrate access to event receiver: Name of 2nd item: ${c.values[1].name}');
}

<强>的index.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
  </head>

  <body>

    <h3>Repeat</h3>
    <my-component>
      <div>some provided content to repeat</div>
    </my-component>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Answer 2

我尝试了不同的方法。

在组件的静态映射中，我存储了组件的实例，以便稍后可以在main.dart中访问该组件

@NgComponent(
    selector: 'dartcomp',
    templateUrl: 'dartComp.html',
    publishAs: 'ctrl',
    map: const
    { 'val' : '@val',
      'id'  : '@id'
    }

)
class DartComp implements NgAttachAware
{ static Map<String,DartComp> comp = new Map();

  String id;
  String val;

  void attach()
  { comp[id]=this; }
}

组件html：

<span> Component val:{{ctrl.val}}:   </span>

在index.html中我放了两个组件

<dartcomp id="dc1"></dartcomp>
<dartcomp id="dc2" val="max"></dartcomp>

在main.dart中，我尝试更改组件dc1

的val属性

DartComp.comp['dc1'].val="frank";

但在浏览器中我看不到变化。有没有办法像这样解决问题？

如何访问angular.dart组件的属性或方法

2 个答案: