在angular2中的指令之前加载组件
loading component before directive in angular2
我在 angular2 应用程序中制作了小组件,我将其用作指令,以在应用程序的不同部分进入小视图。我只在使用该指令的组件中定义选项。
该指令总是期望有选项,在我的例子中,它需要时间才能从服务器获取数据,然后才定义 'someOptions' 。但是这个 'example' 组件马上就要它了,我怎么能推迟呢?
你知道我怎样才能继续使用它作为指令,但告诉 angular 只有在使用该指令的组件中定义了选项后才激活它吗?
// the directive Im planning to use in differnt views
@Component({
selector: 'expml-comp'
})
export class Example1 {
@Input() options: any;
constructor() {}
ngOninit(){
//puting data from options to directive
}
}
//and the component where I want to use this directive:
@Component({
template: '<expml-comp [options] = 'definedData'></expml-comp>',
})
export class Example2 {
constructor() { }
private definedData:any;
//here I need to define the options but before the data comes from server //the Example1 dir is already activated
//and it didnt find definedData so it breaks
ngOnInit(){
//this.definedData=...
}
}
您可以使用 ngOnChanges()
。当绑定到输入的值更改时调用此方法。
export class Example1 {
@Input() options: any;
constructor() {}
ngOnChanges(changes){
if(this.options != null) {
// options are set
}
}
}
我在 angular2 应用程序中制作了小组件,我将其用作指令,以在应用程序的不同部分进入小视图。我只在使用该指令的组件中定义选项。 该指令总是期望有选项,在我的例子中,它需要时间才能从服务器获取数据,然后才定义 'someOptions' 。但是这个 'example' 组件马上就要它了,我怎么能推迟呢? 你知道我怎样才能继续使用它作为指令,但告诉 angular 只有在使用该指令的组件中定义了选项后才激活它吗?
// the directive Im planning to use in differnt views
@Component({
selector: 'expml-comp'
})
export class Example1 {
@Input() options: any;
constructor() {}
ngOninit(){
//puting data from options to directive
}
}
//and the component where I want to use this directive:
@Component({
template: '<expml-comp [options] = 'definedData'></expml-comp>',
})
export class Example2 {
constructor() { }
private definedData:any;
//here I need to define the options but before the data comes from server //the Example1 dir is already activated
//and it didnt find definedData so it breaks
ngOnInit(){
//this.definedData=...
}
}
您可以使用 ngOnChanges()
。当绑定到输入的值更改时调用此方法。
export class Example1 {
@Input() options: any;
constructor() {}
ngOnChanges(changes){
if(this.options != null) {
// options are set
}
}
}