Angular2没有ng-init

Question

众所周知，Angular2没有ng-init或其他东西。因此，如果我们尝试做类似的事情：

<div #rr="2+2">
 {{rr}}
</div>

我们将收到运行时错误：

Error: There is no directive with "exportAs" set to "2+2"

我正在观看youtube上的一个Angular2开发视频，并看到了完全相同的构造。 这是截图：

如何对用户模板变量进行分配？

Answer 1

#rr不等同于ng-init。 ng-init消失了，不会再回来 - 你需要显式初始化组件类中的字段（相当于初始化范围）。

您可以使用<div class="mega-categories"> <ul class="mega-list"> <li class="mega-sub-menu"> <a href="#">link 1</a> <div class="mega-menu-page"> <div class="mega-page-list col-md-3"> <ul class="mega-sub-list"> <li><a href="#">page link 1</a> <ul> <li><a href="#">sub page link 1</a></li> <li><a href="#">sub page link 1</a></li> <li><a href="#">sub page link 1</a></li> <li><a href="#">sub page link 1</a></li> <li><a href="#">sub page link 1</a></li> </ul> </li> <li><a href="#">page link 2</a> <ul> <li><a href="#">sub page link 2</a></li> <li><a href="#">sub page link 2</a></li> <li><a href="#">sub page link 2</a></li> <li><a href="#">sub page link 2</a></li> <li><a href="#">sub page link 2</a></li> </ul> </li> </ul> </div> <div class="mega-page-list col-md-3"> <ul class="mega-sub-list"> <li><a href="#">page link 3</a> <ul> <li><a href="#">sub page link 3</a></li> <li><a href="#">sub page link 3</a></li> <li><a href="#">sub page link 3</a></li> <li><a href="#">sub page link 3</a></li> <li><a href="#">sub page link 3</a></li> </ul> </li> <li><a href="#">page link 4</a> <ul> <li><a href="#">sub page link 4</a></li> <li><a href="#">sub page link 4</a></li> <li><a href="#">sub page link 4</a></li> <li><a href="#">sub page link 4</a></li> <li><a href="#">sub page link 4</a></li> </ul> </li> </ul> </div> <div class="mega-page-list col-md-3"> <ul class="mega-sub-list"> <li><a href="#">page link 5</a> <ul> <li><a href="#">sub page link 5</a></li> <li><a href="#">sub page link 5</a></li> <li><a href="#">sub page link 5</a></li> <li><a href="#">sub page link 5</a></li> <li><a href="#">sub page link 5</a></li> </ul> </li> <li><a href="#">page link 6</a> <ul> <li><a href="#">sub page link 6</a></li> <li><a href="#">sub page link 6</a></li> <li><a href="#">sub page link 6</a></li> <li><a href="#">sub page link 6</a></li> <li><a href="#">sub page link 6</a></li> </ul> </li> </ul> </div> <div class="mega-page-list col-md-3"> <ul class="mega-sub-list"> <li><a href="#"> <img src="http://localhost/wordpress/wp-content/uploads/2016/05/vertical-banner-1.jpg" class="img-responsive"/></a></li> </ul> </div> </div> </div> </li> </ul> </div> 注释的exportAs属性。它导出要在父视图中使用的指令。在父视图中，您可以将其绑定到视图变量，并使用@Directive从父类访问它。

您可以阅读有关exportAs here的更多信息。

请查看示例演示，了解exportAs到here的实施情况。

Answer 2

局部变量旨在引用当前的DOM元素：

<div #elt></div>

或在元素上应用的特定元素：

<div #elt="someDirective" dir></div>

someDirective对应于指令的exportAs值：

@Directive({
  selector: '[dir]',
  exportAs: 'someDirective'
})

您无法使用它们来定义其他内容。这就是消息实际告诉的内容......

Answer 3

为了能够在模板中声明变量，您可以利用自定义结构指令，如：

@Directive({
  selector: '[ngInit]',
})
export class NgInitDirective {
  @Input()
  set ngInit(context: any) {
    this.context.$implicit = this.context.ngInit = context;
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, this.context);
  }

  context: { $implicit?: any, ngInit?: any } = {};

  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}
}

之后，您的代码可以编写如下：

<div *ngInit="2+2 as rr">
  {{rr}}
</div>

或

<div *ngInit="2+2; let rr">
  <span>{{rr}}</span>
</div>

<强> Plunker Example