Question

我有一个有角度版本2的作品infinitefun20.blogspot.gr 它是一个简单的计时器，其中组件具有对包含逻辑的指令的引用：

@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添加到指令中，但仍然无效。

PLNKR

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

Angular的export作为ver 2和4之间的使用差异？

1 个答案: