Question

我创建了一个表单组件。在该表单组件中，我还有一个范围组件。我想知道如何从我的范围组件中检索我的值，更一般地说，我如何从外部组件中与组件进行交互。（即使目标是封装东西）我不知道在某个地方是否有类似的组件，但现在我只是想了解它是如何工作的。谢谢！

这是我的代码

的index.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data_generator_front</title>
  </head>

  <body>   

    <my-form></my-form>

    <div class="results"></div>

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

  </body>
</html>

index.dart

import "package:angular/angular.dart";
import "package:angular/application_factory.dart";
import "package:data_generator_front/component/my_form.dart";
import "package:data_generator_front/component/range.dart";

@Injectable()
class RootContext {
    String myProperty = "jeahhhhhhhh";
    void method1() {
        print("method1");
    }
}

main() {
    applicationFactory()
      .rootContextType(RootContext)
      .addModule(new DateFormModule())
      .addModule(new RangeComponentModule())
      .run();
}

my_form.html

<form>
    <range name="years" value="myProp"></range>
    <div>
       <label>Random:</label>
       <input type="checkbox" ng-model="random">
    </div>
    <div>
      <input type="submit" value="Go !">
    </div>
</form>

my_form.dart

library my_form;
import "package:angular/angular.dart";

@Component(selector: "my-form", templateUrl: "my_form.html", exportExpressions: const ["submit"])
class DateFormComponent {

   @NgOneWay("random")
   bool random;

   submit() {
      print("hello");      
   }

}

class DateFormModule extends Module {
   DateFormModule() {
      bind(DateFormComponent);
   }
}

range.dart

import "package:angular/angular.dart";

@Component(selector: "range", templateUrl: "range.html")
class RangeComponent {
   @NgAttr("name")
   String name;

   @NgOneWay("range_begin")
   String range_begin;

   @NgOneWay("range_end")
   String range_end;

   List<String> ranges = [];

   addRange() {
      ranges.add("$range_begin-$range_end");
      range_begin = "";
      range_end = "";
   }

   info(){
      print(range_begin);
      print(range_end);
      print(ranges);
      print(ranges.reduce((begin, item){
      return begin += ",$item";
   }));
   }

}

class RangeComponentModule extends Module {
   RangeComponentModule() {
      bind(RangeComponent);
   }
}

range.html

<div>
   <label>{{name}}:</label>
   <input type="text" placeholder="begin" size="8" ng-model="range_begin">
   <input type="text" placeholder="end" size="8" ng-model="range_end">
   <input type="submit" value="add" ng-click="addRange()" >
   <input type="submit" value="info" ng-click="info()" >
   <input type="submit" value="value" ng-click="range()" >
</div>

Answer 1

我想将NgOneWay更改为NgTwoWay应该可以解决问题，以便在组件内部更新值。要获取组件之外的值绑定

<range name="years" value="{{myProp}}"></range>

并在my-form组件中创建一个字段。

@NgTwoWay('myProp')
var myProp;

或者，您可以实施ScopeAware以获取范围，然后使用scope.emit，scope.broadcast，scope.on...将数据作为提交事件发送，以便通过DOM发送不只是直接的父母/孩子

Answer 2

差不多:)但它只能单程运作

我在my_form.dart中初始化属性，然后my_form.html的值为binded，最后range组件可以在初始时使用该值。

但是当我更改组件内部的代码时，不再使用my_form.dart绑定值

这是代码

range.html没有改变

my_form.dart

library my_form;
import "package:angular/angular.dart";

@Component(selector: "my-form", templateUrl: "my_form.html", exportExpressions: const ["submit"])
class DateFormComponent {

   @NgOneWay("random")
   bool random;

   @NgTwoWay("v1")
   String v1 = "eee";

   submit() {
      print(random);
      print(v1);
   }

}

class DateFormModule extends Module {
   DateFormModule() {
      bind(DateFormComponent);
   }
}

my_form.html

<form>
    <range name="years" value="{{v1}}"></range>
    <div>
       <label>Random:</label>
       <input type="checkbox" ng-model="random">
    </div>
    <div>
      <input type="submit" value="Go !" ng-click="submit()">
    </div>
</form>

range.dart

import "package:angular/angular.dart";

@Component(selector: "range", templateUrl: "range.html")
class RangeComponent {
   @NgAttr("name")
   String name;

   @NgAttr("value")
   String value;  

   @NgOneWay("range_begin")
   String range_begin;

   @NgOneWay("range_end")
   String range_end;

   List<String> ranges = [];

   addRange() {
      ranges.add("$range_begin-$range_end");
      range_begin = "";
      range_end = "";
      value = ranges.reduce((begin, item){
         return begin += ",$item";
      });
   }

   info(){
      print(range_begin);
      print(range_end);
      print(ranges);
      print(value);
   }

}

class RangeComponentModule extends Module {
   RangeComponentModule() {
      bind(RangeComponent);
   }
}

感谢您提供帮助：）

如何从组件中检索值

2 个答案: