Web AngularDart-使用dynamic once聚合静态定义的子组件的方法_Web_Design Patterns_Dart_Single Page Application_Angular Dart

Web AngularDart-使用dynamic once聚合静态定义的子组件的方法

web design-patterns dart

Web AngularDart-使用dynamic once聚合静态定义的子组件的方法,web,design-patterns,dart,single-page-application,angular-dart,Web,Design Patterns,Dart,Single Page Application,Angular Dart,我希望将静态定义的子组件与可能来自流的动态组件聚合在一起。我想要一种通用的方法来定义这个旋转木马，在这里我可以有一个组件的类型化集合。集合可以静态或动态定义。以下是一个例子： import 'package:angular/angular.dart'; import 'package:angular/core.dart'; import 'package:angular_components/angular_components.dart'; /** * */ @Component(

我希望将静态定义的子组件与可能来自流的动态组件聚合在一起。我想要一种通用的方法来定义这个旋转木马，在这里我可以有一个组件的类型化集合。集合可以静态或动态定义。以下是一个例子：

import 'package:angular/angular.dart';
import 'package:angular/core.dart';
import 'package:angular_components/angular_components.dart';


/**
 *
 */
@Component(
    selector: 'md-text',
    styleUrls: const ['md_text.css'],
    template: '<li>{{name}}</li>',
    directives: const [
      materialDirectives,
    ]
)
class TextComponent implements OnInit{
  @Input()
  String name;

  TextComponent([this.name]);

  TextComponent.withName(String name)
      : this(name);

  @override
  ngOnInit() {
  }
}

@Component(
    selector: 'md-texts',
    styleUrls: const ['text_component.css'],
    template: '<ol><md-text *ngFor="let component of components" [name]="component.name"></md-text><ng-content></ng-content></ol>',
    directives: const [
      CORE_DIRECTIVES,
      materialDirectives,
      TextComponent
    ]
)
class TextsComponent<TextComponent> implements OnInit
{
  Set<T> _components;

  Set<T> get components => _components;

  addComponent(T component){
    this._components.add(component);
  }

  removeComponent(T component) {
    this._components.remove(component);
  }

  TextsComponent() {
    this._components = new LinkedHashSet<T>();
    TextComponent declarativeChannel = new TextComponent.withName("United States");
    this.addComponent(declarativeChannel);
  }

  @override
  ngOnInit(){
    print("I am here");
  }
}

导入“包：角度/角度.dart”；
导入“包：角度/核心.dart”；
导入“包：角_组件/角_组件.dart”；
/**
*
*/
@组成部分(
选择器：“md文本”，
styleURL:const['md_text.css']，
模板：“{{name}”，
指令：const[
物质指导，
]
)
类TextComponent实现OnInit{
@输入（）
字符串名；
TextComponent（[this.name]）；
TextComponent.withName（字符串名称）
：本（姓名）；
@凌驾
恩戈尼尼特（）{
}
}
@组成部分(
选择器：“md文本”，
styleURL:const['text_component.css']，
模板：“”，
指令：const[
核心指令，
物质指导，
文本组件
]
)
类TextsComponent实现OnInit
{
设置组件；
设置get components=>\u components；
添加组件（T组件）{
此._组件。添加（组件）；
}
移除组件（T组件）{
此组件。移除（组件）；
}
TextsComponent（）{
此._components=new LinkedHashSet（）；
TextComponent declarativeChannel=新的TextComponent.withName（“美国”）；
这个.addComponent（declarativeChannel）；
}
@凌驾
恩戈尼尼特（）{
打印（“我在这里”）；
}
}

在我的仪表板组件中，我静态地定义了用法，如下所示：

<md-texts>
    <md-text [name]="'Liberty'"></md-text>
    <md-text [name]="'Life'"></md-text> 
<md-texts>

显示如下美国自由生活

我想做的是将“Liberty”和“Life”也聚合到我的组件集合中，这样我就可以用next和previous按钮来控制它。我也只想在需要索引时渲染它们。在AngularDart中，最好的方法是什么

我在旧版本中发现了类似的问题，但在旧版本和

关于，希望我已经解释了我的问题，我将获得解决此设计问题的正确方法的明确方向。

您可以使用

@ViewChildren

和

@ContentChildren

查询子组件

@ViewChildren

将查询在模板中声明的组件，而

@ContentChildren

将查询投影到模板中的

中的组件

值得一提的是，在您的示例中，动态

TextComponent

被创建了两次。首先，在构造函数中创建一个，然后在模板中声明

时再次创建一个。这意味着您保留引用的实例实际上不是视图中呈现的组件。为了避免这种情况，不要刻意创建实例。只需保留创建组件所需的数据模型，然后通过模板中声明组件的输入进行传递。然后，您可以使用

@ViewChildren

查询您创建的组件

这里有一个例子

@Component(
  selector: 'md-texts',
  template: '''
    <ol>
      <md-text *ngFor="let text of texts" [text]="text"></md-text>
      <ng-content></ng-content>
    </ol>
  ''',
  directives: const [NgFor, TextComponent],
)
class TextsComponent {
  /// Text that was projected through `<ng-content>`.
  @ContentChildren(TextComponent)
  QueryList<TextComponent> contentTexts;

  /// Text that was created in our view from our model.
  @ViewChildren(TextComponent)
  QueryList<TextComponent> viewTexts;

  /// Data model for the text in our view.
  final List<String> texts = [
    ...
  ];
}

@组件(
选择器：“md文本”，
模板：“”
''',
指令：const[NgFor，TextComponent]，
)
类文本组件{
///通过“`”投影的文本。
@ContentChildren（TextComponent）
查询列表内容文本；
///从模型在视图中创建的文本。
@ViewChildren（文本组件）
查询列表视图文本；
///我们视图中文本的数据模型。
最终清单文本=[
...
];
}

或者，您可以从视图中的单个数据源渲染所有

，并依靠传入静态数据的模型而不是投影组件。