在Angular 4中的函数中打开模式对话框

我有一个角度为4的应用程序，我想在函数中打开模态对话框。在Angular 4中的函数中打开模式对话框

所以，我有我的模态代码，我可以打开，当我点击一个按钮：

<button class="btn btn-primary" id="test" (click)="open(addProjectForm)">test</button>

但我想从component.ts的ngOnInit函数打开模式。

所以，我怎么能打开一个函数内部，而不是与点击选项模式？

来源

2017-07-07 Adrien

只需调用开放ngOnInit（addProjectForm）。 –

但是带有'open（addProjectForm'）的按钮在modal.component.html中，我想在另一个组件中调用它：timeline.component.ts。因此，名称不能被找到。 – Adrien

所以基本上你想要的说的是，你想调用另一个组件中定义的一个组件的功能吧？ –

Angular powered Bootstrap.可以帮助你在这里。

在你的组件，你必须导入NgbModal，并在你的组件注入它，使用构造。您可以使用此服务打开模式。

import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 

@Component({ ... }) 
export class MyComponent implements OnInit { 

    constructor(private modalService: NgbModal) 
    { 
    } 

    ngOnInit() { 
    } 

    public show() 
    { 
    this.modalService.open('text'); 
    } 
}

这将打开一个消息“文本”的模式。但我想你可能想添加一个更复杂的信息。您也可以将HTML放入组件的视图中，并使用它。

<ng-template #wizard> 
    text 
</ng-template>

下一页你的方法里面，你可以参考该模板

@ViewChild('wizard') 
public wizardRef: TemplateRef<any>; 

public show() 
{ 
    this.modalService.open(this.wizardRef); 
}

现在<ng-template #wizard>的内容将模态中显示被添加。

您可以使用NgbModalOptions对象设置更多细节，并在调用open(ref, options)方法时指定它。

来源

2017-08-31 13:58:27 bvdb

它也可能有助于https://www.code-sample.com/2017/11/angular-4-open-dialog-box-上click.html –

在Angular 4中的函数中打开模式对话框

回答

相关问题