Question

我正在使用这个库https://github.com/dougludlow/ng2-bs3-modal来制作角度2的模态。我需要我的应用程序模态，但在一个单独的组件中。示例：

a.component.html由按钮表示：

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

并且b.component.html由模态表示：

<modal #modal>
    <modal-header>
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Cancel</button>
        <button type="button" class="btn btn-primary" (click)="modal.close()">Ok</button>
    </modal-footer>
</modal>

我应该在ts中写什么？你可以帮助我一个笨蛋吗？谢谢:)）

Answer 1

1）a.component：

import {b_component} from './{YOUR_COMPONENT_PATH}';
@Component({
  selector: 'my-app',
  template: `
    <button type="button" class="btn btn-default" (click)="open()">Open me!</button>
    <{YOURS_SELECTOR_OF_B_COMPONENT}></{YOURS_SELECTOR_OF_B_COMPONENT}>
  `,
})
export class App {
  @ViewChild(b_component)
    modalHtml: b_component;

    open() {
        this.modalHtml.open();
    }
  constructor() {
  }
}

b.component：

import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
@Component({
    selector: 'my-modal',
    template: `
    <modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello From new Component!!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
  `
})
export class b_component {
    constructor() {
    }
    @ViewChild('modal')
    modal: ModalComponent;
    open(){
        this.modal.open();
    }

}

如何在角度2中将模态作为单独的组件？

1 个答案: