Angular4在构造函数中调用一个函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular4在构造函数中调用一个函数相关的知识,希望对你有一定的参考价值。

我试图在Angular 4的构造函数中调用一个模态函数,但是函数得到突出显示没有正确调用,当页面加载时,不会在日志中读取错误,并且模式不会弹出它的假设。屏幕变黑,但模态中的文字没有显示出来。

constructor(public formBuilder: FormBuilder,
            public router: Router,
            public toastr: ToastrService,
            public http: HttpClient,
            public modalService: BsModalService,) {
  if (this.getWardData) {
    this.displayHint();
  }
}

displayHint(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
}

html

<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to Continue where you left?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>
答案

尝试使用以下代码

constructor(public formBuilder: FormBuilder,
    public router: Router,
    public toastr: ToastrService,
    public http: HttpClient,
    public modalService: BsModalService, ) {
    // if (this.getWardData) {
    //   this.displayHint();
    // }
  }

  ngOnInit() {
    if (this.getWardData) {
      this.displayHint();
    }
  }

  displayHint(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
  }
另一答案

我认为你有模态模板的问题。您可以运行模态,但需要传递给displayHint方法模板参数(TemplateRef)。在您查看中,我看到您有此模板,但您在组件实现中没有引用此模板。将这部分代码添加到组件中(参考模态模板 - 您需要这个以显示模态):

@ViewChild('template') private modalTemplate: TemplateRef<any>;

从你的构造函数中删除this.displayHint()(我在下面解释),在ngOnInit实现上添加ngAfterViewInit并在那里添加displayHint方法调用:

export class YourComponentName implements AfterViewInit {
    @ViewChild('template') private modalTemplate: TemplateRef<any>;

    getWardData = true; // for example purposes - always true

    constructor(public formBuilder: FormBuilder,
                public router: Router,
                public toastr: ToastrService,
                public http: HttpClient,
                public modalService: BsModalService
    ) {}

    ngAfterViewInit() {
        if (this.getWardData) {
            this.displayHint(this.modalTemplate);
        }
    }

    displayHint(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
    }
}

构造函数和组件的ngOnInit / ngAfterViewInit之间存在巨大差异。 Angular bootstrap过程包括两个主要阶段:

  • 构建组件树
  • 运行变化检测

您的控制器方法正在“构建组件树”阶段中运行

(这里未定义对模态模板的引用)

您的ngOnInit方法正在“运行更改检测”阶段中运行。

(此处定义了对模态模板的引用)

@Input通信机制作为以下更改检测阶段的一部分进行处理,因此输入绑定在构造函数中不可用。

所以你不能从构造函数运行你的模态

More about lifecycle hooks you can find here

Live working example you can find here

以上是关于Angular4在构造函数中调用一个函数的主要内容,如果未能解决你的问题,请参考以下文章

Android 逆向ART 脱壳 ( DexClassLoader 脱壳 | DexClassLoader 构造函数 | 参考 Dalvik 的 DexClassLoader 类加载流程 )(代码片段

一旦 HTML 在 Angular 4 中完全动态呈现,如何在 jQuery 中调用函数?

给定一个类型对象的实例,如何调用该类的构造函数(在其他语言中等效于GetConstructor)

在 Visual Studio 中创建构造函数的代码片段或快捷方式

调用 Fragment 构造函数导致异常,kotlin?

如何缓存片段视图