具有范围的 Angular2 指令

Question

Angular2 中的指令没有 "scopes"，而组件有。但就我而言，我需要指令来创建范围。查看我的 App 组件 - 它有一个 HTML 模板，并且 foo 指令可能出现在任何元素上的任何位置。这应该从服务中获取一些日期并将其分配给元素。

在 Angular1 中非常简单...指令可以有自己的范围。但是在 Angular 2 中我找不到任何（甚至是肮脏的）方法来实现它。

看起来很简单，不是吗？

@Directive({
  selector: '[foo]'
})
class FooDirective {
  @Input()
  public id:string;

  public bar;

  constructor() {
     this.bar = 'This is the "bar" I actually need. It is taken from DB let's say..' + this.id;
  }
}




@Component({
  selector: 'app',
  template: `
     <div foo id="2">
       This is random content 1: {{bar}}
     </div>

     <div foo id="2">
       This is random content 2: {{bar}}
     </div>
  `,
  directives: [FooDirective]
})
class App {
  bar:string = 'This should be ignored, I need "bar" to be set from directive!';
}

bootstrap(App);

Answer 1

您可以尝试利用引用应用指令的局部变量进行类似的操作：

@Component({
  selector: 'app'
  template: `
    <div foo id="2" #dir1="foo">
      This is random content 1: {{dir1.bar}}
    </div>

    <div foo id="2" #dir2="foo">
      This is random content 2: {{dir2.bar}}
    </div>
  `,
  directives: [FooDirective]
})
class App {
  bar:string = 'This should be ignored, I need "bar" to be set from directive!';
}

在您的例子中，bar 是使用当前组件的属性 App 进行评估的。

编辑（根据@yurzui 的评论）

您需要在指令中添加 exportAs 属性：

@Directive({
  selector: '[foo]',
  exportAs: 'foo'
})
class FooDirective {
  (...)
}

Answer 2

当你说组件确实有作用域是什么意思？

我的理解是组件之间没有共享对象（或原型继承）。但我认为这就是您要找的东西——您希望 FooDirective 和 App 共享同一个（作用域）对象，对吗？如果是这样，我认为 Angular 2.

中没有任何等价物

我怀疑你会喜欢这个，但我能想到的最好的方法（与@Thierry 的方法不同）是使用 div 作为 "shared object"（而不是指示）。该指令使用 HostBinding 将值保存到 div 上的数据属性，然后组件在模板中检索该值，使用局部变量获取对 div/共享对象的引用：

import {Component, Directive, Input, HostBinding} from '@angular/core';

@Directive({selector: '[foo]'})
class FooDirective {
  @Input() id:string;
  @HostBinding('attr.data-bar') bar;
  ngOnInit() {
     this.bar = 'This is "bar" I actually need. It is taken from DB lets say...' + this.id;
  }
}

@Component({
  selector: 'my-app',
  template: `{{title}}<p>
    <div #div1 foo id="2">
      This is random content 1: {{div1.getAttribute('data-bar')}}
    </div>`,
  directives: [FooDirective]
})
export class AppComponent {
  title = `Angular - RC.1`;
}

Plunker

我比上面展示的更喜欢@Thierry 的方法，但我想我会 post 无论如何我都在玩弄什么。

具有范围的 Angular2 指令

Angular2 Directive with scope

javascript

angular2-directives

angular