Question

我在Angular应用程序中定义了一个指令，它暴露了要设置的@Input()：

@Directive({
  selector: '[options]'
})

export class ExampleDirective {

  [...]

  @Input() options:any;

  constructor(private el:ElementRef) {
    System.import('required-js-lib-1.js').then(()=>{
      System.import('required-js-lib-2.js').then(()=>{
        this.attach()
      })
    })
  }

  attach() {
    console.log(this.options); // problem is here
  }
}

在具有HTML form标记的组件上，我可以使用此指令并提供相应的选项：

<form id="my-form" [options]="validationOptions">

在组件的TypeScript（ts）文件中，我定义validationOptions：

export class ExampleComponent implements OnInit {

  [...]

  validationOptions: any = { /* Some values here */ }

  [...]

}

如果我直接导航到此页面（例如http://localhost:4000/#/Example/），那么一切都按预期工作。 但是，如果我单击单页应用程序中的链接导航到该组件，则validationOptions在指令中未定义。

我在组件的构造函数和console.log中添加了一些ngOnInit语句，并在第一次读取其options变量时在指令本身中添加了这些语句。

当我直接在浏览器中访问该组件时，所有三个区域都显示validationOptions / options具有该值。
当我从单页面应用程序中导航到组件时，组件构造函数和ngOnInit显示validationOptions具有值，但在指令中，options为{{1 }}。

如何使我的组件中的undefined变量始终传递到我的指令中的validationOptions，无论我是否直接访问组件而不是在单页内导航到它申请土地？

编辑：更多信息。指令/组件构造函数/ init的顺序根据两个可能相关的场景而变化。

当组件直接在浏览器中加载并且可以正常工作

options

通过单页应用导航加载组件时失败

component.ctor: [object Object]
directive.ctor: undefined
component.init: [object Object]
directive.attach(): [object Object]

稍后在第二种情况下调用组件的component.ctor: [object Object] directive.ctor: undefined directive.attach(): undefined component.init: [object Object]方法（在调用指令的构造函数/ attach（）方法之后（attach（）是访问值的位置），这可能是导致这种情况的原因......但我不确定为什么。

Answer 1

尝试在ngOnInit

中获取承诺回复

  ngOnInit() {
    System.import('required-js-lib-1.js').then(()=>{
      System.import('required-js-lib-2.js').then(()=>{
        this.attach()
      })
    })
  }

在没有浏览器刷新的单页应用程序中未定义Angular 5组件变量

1 个答案: