Question

在Util中

- 我有模态-dialog.component.ts

label[for=options_455_2]
   {
      width:50px; height:50px; background:#000; border-radius:50%;

   }

模态-dialog.html

import {Component, Input, ViewChild, ViewContainerRef} from "@angular/core"; 
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap'; 

    @Component({
    selector: 'custom-modal',    
    templateUrl: 'modules/util/template/modal-dialog.html',
    exportAs: 'child' }) export class ModalDialogComponent {
    @ViewChild('childModal') public childModal: ModalDirective;
    public show(variant): void {
        debugger
        console.log(this.childModal);
        this.childModal.show();
    } }

Util.module.ts

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Large modal</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div> </div>

app.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { HttpModule, Http } from '@angular/http'; 
import { ModalDialogComponent } from '../../util/components/modal-dialog.component';

@NgModule({
    imports: [
        CommonModule,
        HttpModule,
        ModalModule        
    ],
    exports: [
        CommonModule,
    ],
    providers: [
    ],
    declarations: [
        ModalDialogComponent
    ] }) export class UtilModule {
    static forRoot(): ModuleWithProviders {        
        return {
            ngModule: UtilModule
        };
    } }

test.component.html

import UtilModule.forRoot()

并在test.component.ts / *系统定义的* /

中

<div>
   <custom-modal></custom-modal>
   <button type="button" class="btn btn-primary (click)="c.show(variant)">open</button>
</div>

我无法在父级（测试）上加载子html

未处理的承诺 rejection：模板解析错误：'custom-modal'不是已知的元件： 1.如果'custom-modal'是Angular组件，则验证它是否是此模块的一部分。 2.如果'custom-modal'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此'@ NgModule.schemas'中组件来抑制此消息。（“

模态teamplate作为指令并在角度2中的父组件中使用

0 个答案: