代码之家 › 专栏 › 技术社区 › BeetleJuice

角度6:从模板传递viewContainerRef

angular

5

BeetleJuice · 技术社区 · 7 年前

我有一个角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 嫁妆 ?

2 回复 | 直到 7 年前

1

5

SiliconSoul 7 年前

我不认为有什么内在的方法。但是,您可以创建一个指令,使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

2

0

Rotem jackoby 7 年前

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

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