在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中的函數中打開模式對話框

回答

相關問題