angular - 如何在 Angular 5 中的指令上使用 exportAs 以在模板中获取其引用？

Question

我有以下指令:

@Directive({
  selector: '[changeColor]',
  exportAs:'changeColor' 
})
export class ColorDirective {
    constructor(elem: ElementRef, renderer: Renderer2) {
       renderer.setStyle(elem.nativeElement, 'color', 'red');
    }
}

我有以下模板:

<h1 changeColor>Hello</h1>

这按预期工作并以红色显示“Hello”。但是，当我尝试访问指令的引用时，出现错误。例如，下面的代码:

<h1 #x=changeColor>Hello</h1>
{{x}}

产生以下错误 "There is no directive with "exportAs" set to "changeColor"" .我哪里错了？

Answer 1

您没有申请 changeColor第二个代码段中的指令，因为没有 changeColor h1 上的属性.它应该是

<h1 changeColor #x="changeColor">Hello</h1>

can you explain why the selector of an attribute should be within [ ]

因为这是 CSS 选择器的语法(与您在 CSS 样式表中使用的相同):

[foo]选择具有名为 foo 的属性的任何元素

.foo选择具有名为 foo

的 CSS 类的任何元素

foo选择任何名为 foo

的元素

bar[foo]:not(.baz)选择任何名为 bar 的元素，该元素具有名为 foo 的属性并且没有名为 baz 的类。