Angular 2 版和 4 版之间的 exportAs 使用区别？

Question

我有一个使用 angular version2 编写的工作 PLNKR。
这是一个简单的计时器，其中组件引用了包含逻辑的指令：

@Component({
  selector: 'my-app',
   template: `
    <div>
     <div class="timer" *simpleTimer="#timer=timerApi">       <-- see here
     <div class="time">{{ timer.getTime() }}</div>
      ...
    </div>
  `

在指令本身中 - 它通过以下方式设置 timerApi 的值：

  view.setLocal('timerApi', api);

指令不使用exportAs：

@Directive({
  selector: '[simpleTimer]'
})

我想将其转换为 Angular 4。但某些功能不起作用。

例如，以下代码：*simpleTimer="#timer=timerApi" 产生：

解析器错误：[#timer=timerApi] 中的第 1 列中出现意外的标记 #

这个方法view.setLocal 也不存在了。

问题：

如何从组件中引用指令？ （所以我将拥有它的所有方法）

我已将exportAs 添加到指令中，但它仍然不起作用。

The problematic Plunker converted to ver 4.2.3

Answer 1

vcRef.createEmbeddedView 的第二个参数需要上下文：

let api = {
  toggle: () => this.toggle(),
  reset: () => this.reset(),
  getTime: () => this.getTime()
};
let view = this.viewContainer.createEmbeddedView(this.templateRef, { timerApi: api });

用法：

*simpleTimer="let timer = timerApi"

Fixed Plunker v4.2.3

另一种选择

let view = this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: api });

和模板

*simpleTimer="let timer"

Plunker