ng boostrap + angular4:动态html模态内容加载

时间:2017-08-18 15:07:21

标签: angular ng-bootstrap

我有以下架构:

str +=std::to_string(grid[i][j]);

我的模态组件如下所示:

.
├── companies.component.ts
├── companies.html
├── companies.service.ts
└── components
    └── modal
        ├── modal.component.html
        └── modal.component.ts

我从@Component({ selector: 'service-modal', templateUrl: './modal.component.html' }) export class ModalComponent implements OnInit { public modalHeader: string; public modalContent: string; constructor(private activeModal: NgbActiveModal) { } public ngOnInit() { } public closeModal() { this.activeModal.close(); } } 这样使用它:

companies.component.ts

我想使用模态组件来创建公司OR用户实体。将html表单绑定到modalContent是一个好习惯吗?还有其他方法吗?我应该创建两个不同的模态组件(一个用于用户,一个用于公司)?

1 个答案:

答案 0 :(得分:1)

首先,您可以在其他地方重复使用您的模态。因此,您应该将此组件放入“共享”组件中。文件夹中。

然后你有多个解决方案:

  1. 使用ng-content。您可以创建模态组件或使用bootstrap' s。
  2. <my-modal>
        <my-comp-to-create-companies>
        </my-comp-to-create-companies>
    </my-modal>
    <my-modal>
        <my-comp-to-edit-companies></my-comp-to-edit-companies>
    </my-modal>
    

    您可以合并编辑/创建组件,因为表单可能具有相同的属性。

    1. 动态组件加载器:https://angular.io/guide/dynamic-component-loader