填充在角镖组件导出字段 [英] Populating derived fields in an Angular Dart component

问题描述

我有带一个属性的组件。我要填充在组件的字段与从该属性导出的值。我遇到的问题与属性在构造函数中的code运行时并没有发生，绑定。那么，如何做我设置导出字段的值？

下面是一些code：

进口'包：角/ angular.dart';@NgComponent（
    选择：'令牌'，
    templateUrl：./component.html'，
    cssUrl：./component.css'，
    publishAs：CTRL，
    图：常量{
      文：@Text
    }
）
类TokensComponent {
  字符串文本;  //派生领域。
  清单＆LT;令牌GT;令牌=新的List＆LT;令牌GT;（）;  TokensComponent（）{
    打印（'里面的构造，文字= $文字'）; // $ text为null。
  }}类令牌{
  串字符;
  bool的重要;
  令牌（this.char，this.important）;
}


解决方案

有关导出字段目前最好的做法是计算它们点播和高速缓存的结果。通过等待，应用程序可能能够避免不必要的工作不被使用的是导出字段时。

例如。您的示例部分将如下：

进口'包：角/ angular.dart';@NgComponent（
    选择：'令牌'，
    templateUrl：./component.html'，
    cssUrl：./component.css'，
    publishAs：CTRL，
    图：常量{
      文：@Text
    }
）
类TokensComponent {
  地图＆LT;布尔，列表与LT;令牌GT;＆GT; _tokensCache =新地图＆LT;布尔，列表与LT;令牌GT;＆GT;（）;  串_text;
  获取文本=＆GT; _文本;
  设置文本（T）{
    _text = T;
    _tokensCache.clear（）; //缓存失效随时文本更改。
  }  //派生领域。
  清单＆LT;令牌GT;获得代币=＆GT;
    文字== NULL？ []：_tokensCache.putIfAbsent（真实的，
        （）=＆GT; 。text.split（''）图（（焦）=＆gt;新建令牌（CHAR，FALSE）））;}


现在，令牌始终是最新的，如果从来都没有要求令牌，该组件没有计算这个领域。

在这个例子中，所需要的高速缓存。由于角的脏检查使用相同来检查是否有变化，如果该组件并没有改变我们的组件必须返回相同的标记列表。

I have a component that takes a single attribute. I want to populate a field in the component with a value that is derived from this attribute. I am running into the problem that the binding with the attribute has not happened when the code inside the constructor runs. How, then, do I set the value of the derived field?

Here is some code:

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'tokens',
    templateUrl: './component.html',
    cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text'
    }
)
class TokensComponent {
  String text;

  // Derived field.
  List<Token> tokens = new List<Token>();

  TokensComponent() {
    print('inside constructor, text = $text'); // $text is null.
  }

}

class Token {
  String char;
  bool important;
  Token(this.char, this.important);
}

解决方案

The current best practice for derived fields is to calculate them on-demand and cache the results. By waiting, the app may be able to avoid unneeded work when the derived field isn't being used.

e.g. your example component would look like:

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'tokens',
    templateUrl: './component.html',
    cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text'
    }
)
class TokensComponent {
  Map<bool, List<Token>> _tokensCache = new Map<bool, List<Token>>();

  String _text;
  get text => _text;
  set text(t) {
    _text = t;
    _tokensCache.clear();  // invalidate the cache any time text changes.
  }

  // Derived field.
  List<Token> get tokens =>
    text == null ? [] : _tokensCache.putIfAbsent(true,
        () => text.split('').map((char) =>  new Token(char, false)));

}

Now, tokens is always up-to-date, and if nothing ever asks for tokens, the component doesn't compute that field.

In this example, the cache is required. Since Angular's dirty checking uses identical to check for changes, our component must return an identical tokens list if the component has not changed.

这篇关于填充在角镖组件导出字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！