Question

我有一个采用单一属性的组件。我想使用从此属性派生的值填充组件中的字段。我遇到的问题是，当构造函数中的代码运行时，没有发生与属性的绑定。那么，如何设置派生字段的值？

以下是一些代码：

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);
}

Answer 1

一种可能的解决方案是使用组件工具NgAttachAware并定义attach()方法。然后可以在attach()内设置派生字段的值。我不知道是否有更惯用的方法来做到这一点，但使用attach()似乎有效。

以下是代码：

import 'package:angular/angular.dart';

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

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

  TokensComponent() {
    print('inside constructor, text = $text');
  }

  void attach() {
    print('inside attach(), text = $text'); // $text is no longer null.
    text.split('').forEach((char) => tokens.add(new Token(char, false)));
  }
}

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

Answer 2

派生字段的当前最佳实践是按需计算它们并缓存结果。通过等待，应用程序可以在不使用派生字段时避免不必要的工作。

e.g。您的示例组件如下所示：

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)));

}

现在，令牌始终是最新的，如果没有任何东西要求令牌，则该组件不会计算该字段。

在此示例中，需要缓存。由于Angular的脏检查使用identical来检查更改，因此如果组件未更改，我们的组件必须返回相同的标记列表。

在Angular Dart组件中填充派生字段

2 个答案: