AngularDart: использование входных переменных шаблона в структурных директивах - PullRequest
Новая
       47

AngularDart: использование входных переменных шаблона в структурных директивах

0 голосов
/ 28 декабря 2018

Я изучаю AngularDart.Все прошло так хорошо.Но я застрял со структурными директивами: я не могу понять, как использовать входные переменные шаблона для реализации моей собственной структурной директивы.

Я много раз читал этот документ: Структурные директивы .

И, хотя приведенный ниже материал относится к AngularJS, я прочитал следующие вопросы / документы:

Говорят, что из объявления micosyntax"let v=value" Angular создает переменную шаблона"let-v".Однако я не могу использовать имя "let-v" в шаблоне, поскольку "let-v" не является допустимым именем переменной.

Кстати, если вы посмотрите на приведенное объяснение здесь для директивы ngFor: 

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackByHeroId"
     [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd"
          [ngForTrackBy]="trackByHeroId">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</template>

Вы видите, что внутри шаблона входная переменная шаблона i называется i (не let-i): 

<div [class.odd]="odd">({{i}}) {{hero.name}}</div>

Я попробовал LOT вещей в коде Dart моей структурной директивы.Но ничего не работает.

Я прочитал исходный код директивы NgFor .Что-то потенциально интересное здесь: 

  viewRef.setLocal('first', identical(i, 0));
  viewRef.setLocal('last', identical(i, len - 1));
  viewRef.setLocal('index', i);
  viewRef.setLocal('count', len);

Однако я попробовал это безуспешно.

Вот простой код, который я написал:

Файл: lib/src/directive_my_dummy.dart

import 'package:angular/angular.dart';

@Directive(
    selector: '[myDummy]'
)

class MyDummyDirective implements OnInit {
  TemplateRef _templateRef;
  ViewContainerRef _viewContainer;

  MyDummyDirective(TemplateRef templateRef, ViewContainerRef viewContainer) {
    _templateRef = templateRef;
    _viewContainer = viewContainer;
  }

  @Input('let-d')
  List<int> d;

  void ngOnInit() {
    print("One instance of MyDummyDirective is instantiated.");
    EmbeddedViewRef vr = _viewContainer.createEmbeddedView(_templateRef);
    vr.setLocal('d', [1,2,3]);
    print(d.toString());
  }
}

Файл: lib/app_component.html

<div *myDummy="let d=data">
    This is a dummy test. {{d.toString()}}
</div>

<div *myDummy="let d=[1,2,3]">
    This is a dummy test. {{d.toString()}}
</div>

<div *myDummy="let d=getData()">
</div>

<div *myDummy="let d=[1,2,3]; let name='Toto'"></div>

Полный код можно найти здесь .

Можете ли вы показать мне основной пример, который иллюстрируетиспользование шаблона входных переменных?

1 Ответ

0 голосов
/ 29 декабря 2018

Во-первых, есть две сущности, которые мы называем «шаблоном»:

  • Шаблон компонента.
  • (структурный) шаблон директивы.

Термин " переменная шаблона ввода " относится к (структурному) шаблону директивы.

Я думаю, что было бы лучше использовать наименование " переменная шаблона шаблона ввода".

Я буду использовать наименование" переменная шаблона директивы ввода"вместо" переменная шаблона ввода ".

Роль ввода переменная шаблона директивы предназначена для настройки (структурного) шаблона директивы .

Откуда берется значение входной переменной шаблона директивы ?

Ответ таков: значение переменной шаблона входной директивы присваивается в экземпляре директивы.Вы не можете определить значение переменной шаблона * 1034 непосредственно в шаблоне компонента.Например, приведенный ниже код <div *myDummy="let d=10"> будет НЕ присваивать значение 10 переменной d.

Значение переменной шаблона входной директивы назначаетсяизнутри директивы экземпляра.Например: 

TemplateRef _templateRef;
ViewContainerRef _viewContainer;
// ...
_viewContainer.createEmbeddedView(_templateRef);
_viewContainer.get(0).setLocal('data', 'MyDummyDirective.data');

И вы пишете в шаблоне компонента: 

<div *myDummy="let d=data">

Я привожу простой пример:

lib / src / directive_my_dummy.dart 

@Directive(
    selector: '[myDummy]'
)
class MyDummyDirective implements OnInit {
  TemplateRef _templateRef;
  ViewContainerRef _viewContainer;

  @Input('myDummyVariable')
  String variable;

  MyDummyDirective(this._templateRef, this._viewContainer);

  void ngOnInit() {
    // WARNING: the property "variable" has no value assigned within the constructor.
    _viewContainer.createEmbeddedView(_templateRef);
    _viewContainer.get(0).setLocal('data', 'MyDummyDirective.data');
    print('MyDummyDirective.variable = ${variable}');
    _viewContainer.get(0).setLocal('var', 'This is ' + variable);
  }
}

lib / app_component.html 

<div *myDummy="let d=data; variable:'value from the lib/app_component.html'; let v=var">
        <p>This is a dummy directive.</p>
        <ul>
            <li><b>d</b>=<code>{{d.toString()}}</code></li>
            <li><b>data</b>=<code>{{data}}</code> (makes reference to the instance of AppComponent)</li>
            <li><b>v</b>=<code>{{v}}</code></li>
        </ul>
</div>

lib / app_component.dart 

import 'package:angular/angular.dart';
import 'package:myapp/src/directive_my_dummy.dart';

@Component(
    selector: 'app-component',
    templateUrl: 'app_component.html',
    directives: [MyDummyDirective],
)
class AppComponent {
    List<int> getData() => [100, 200, 300];
    String data = 'AppComponent.data';
}

Результат: 

This is a dummy directive.

<ul>
    <li>d=MyDummyDirective.data</li>
    <li>data=AppComponent.data (makes reference to the instance of AppComponent)</li>
    <li>v=This is value from the lib/app_component.html</li>
</ul>

РЕДАКТИРОВАТЬ:

Поскольку изображение часто говорит лучше, чем слова ...

...