Question

我有一个Angular 6应用；组件方法需要访问组件模板中任何给定元素的viewContainerRef才能将其传递给服务方法。这是我目前正在做的事情。它可行，但我希望更简单：

<div #myDiv></div>
<button (click)="doWork()"></button>

在组件中：

@ViewChild('myDiv', {read: ViewContainerRef}) divView: ViewContainerRef;

doWork() {
  this.service.work(this.divView);
}

因此doWork需要viewContainer。我希望的是更简单的方法，例如：

<div #myDiv></div>
<button (click)="doWork(???)"></button>

是否可以通过某种方式将viewContainer从模板直接传递到doWork中？

Answer 1

我认为没有内置的方法。但是，您可以创建一个指令，以使ViewContainerRef在模板中可用：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[viewContainer]',
  exportAs: 'viewContainer'
})
export class ViewContainerDirective {
  constructor(public container: ViewContainerRef) {
  }
}

https://stackblitz.com/edit/angular-oydor5?file=src%2Fapp%2Fapp.component.html

Answer 2

您可以在模板内的任何位置访问变量。例如：

<div #myDiv></div>
<button (click)="doWork(myDiv)"></button>

Angular 6：从模板传递viewContainerRef

2 个答案: