如何将一个输入传递给一个以组件为目标的指令

Question

我有一个适用于组件的每个实例的指令(我使用组件选择器作为我的指令的选择器属性)，我希望能够将输入传递给该指令。

我使这个例子尽可能的小和紧凑。假设我有一个像这样的组件:

import { Component, Input } from '@angular/core';
@Component({
selector: 'component-a',
template: `<h1>My format is {{ format }}!</h1>`
})
export class ComponentAComponent  {
public format: string;
}

我有下面的指令来瞄准和修改这个组件的实例:

import { Directive, Input } from '@angular/core';
import { ComponentAComponent } from './component-a.component';
@Directive({
selector: 'component-a',
})
export class ComponentADirective {
@Input() myCustomFormat;
constructor(cmp: ComponentAComponent) {
cmp.format = this.myCustomFormat;
}
}

我试着传递一个输入:

<component-a [myCustomFormat]="'Test'"></component-a>

然而，它不起作用。我做错了什么?

Answer 1

指令遵循任何Angular元素的生命周期。

这意味着像组件一样，@Input是在特定的钩子上声明的。

与其在构造函数中设置它，不如在

中设置它

• ngOnChanges
• ngOnInit

两者都是有效的，但是on init只触发一次，而ease on changes在每次输入值更改时都被触发。