angular - 结构指令的上下文未更新

Question

我创建了一个带有上下文的结构指令。

@Directive({selector: '[myDir]'})
export class MyDir implements OnInit {
  constructor(private templateRef: TemplateRef<any>,
              private viewContainerRef: ViewContainerRef,
  ) { }

  public context = {$implicit: false}

  ngOnInit() {
    this.viewContainerRef.createEmbeddedView(this.templateRef, this.context)
  }
}

这就是我使用它的方式。

<pre *myDir="let context">Context: {{ context | json}}</pre>

模板已正确安装到 View 中， Context: false如预期的那样存在。

但是，如果我尝试更改上下文，它是 未反射(reflect)在 View 中 .判断 ngTemplateOutlet spec from the Angular repo ，它看起来应该在上下文变化时更新。 我的代码有错误，还是我误解了规范？

我也尝试过注入(inject) CR 并手动触发更改检测，但没有奏效。在我的真实案例中，更改应该在监听鼠标事件的可观察订阅上触发，但这里有一个简单间隔的演示。

Observable
  .interval(500)
  .map((_, i) => i % 2 == 0)
  .takeUntil(this.destroy$)
  .subscribe(context => {
    this.context = {$implicit: context}
    console.log('Context is now', this.context.$implicit)
  })

虽然 context$ 变化，变化 是 显示在控制台中， View 不会更新。 Here's a demo on StackBlitz .

我在销毁时添加了取消订阅，因为否则 Blitz 会在几次重新加载后发疯。还添加了一个测试 observable，它只是 AppComponent 的半秒间隔的简单计数器，与指令无关。这只是一个健全性检查，应用程序正在运行，CD 周期通常在整个应用程序上正常运行。我不在任何地方使用 OnPush。

Answer 1

Javascript 是非常有趣的语言。

让我们考虑以下代码:

let view: any = {};
function detectChanges() {
  console.log(view.context);
}

function createEmbeddedView(context) {
  view.context = context;
}

let context = { x: false };
createEmbeddedView(context);

detectChanges(); // prints { x: false }

当我们创建 context并将其传递给 createEmbeddedView功能。

现在让我们更改 context .我们将这样做两个选项:

1)改变自己

context = { x: true };

detectChanges(); // prints { x: false }

2)改变内部

context.x = true;

detectChanges(); // prints { x: true} Hooray!!!

正如我们所看到的，我们的输出在第一种情况下没有改变，而在第二种情况下工作。那是因为在 javascript 中我们传递对象 by sharing .

这是一种特定类型的按值传递。如果我们更改参数本身，它不会对函数内部提供的项目产生任何影响。但是如果我们改变一些属性，那么它就会改变项目。

因此，对于您的情况，您可以更改上下文，例如:

this.context.$implicit = context;

https://stackblitz.com/edit/so-context-question-a4n5yx?file=app%2Fapp.component.ts