Question

我正在使用angular2.0.0-beta.15。基本上我想在点击标题中的按钮时加载模态窗口。我已经在html中放置了modal的模板。我正在尝试的是，在父组件中点击按钮，一个指示按下哪个按钮的参数，传递给子组件。基于此我从db获取模态的数据并将其放入模态窗口.Below是一段代码。

parent.html

<modal-child id="ContactModal"></modal-child>
   <-- code goes here-->
<li [style.display]="!showContact?'none':'inherit'"><a (click)="getContact()" data-remote="false"
                        data-toggle="modal" data-target="#ContactModal"><i class="fa fa-question"></i>Contact</a></li>
 <-- code goes here-->

parent.component.ts

import {Component, Input, provide, DynamicComponentLoader, Injector} from 'angular2/core';
 import {ModalChildComponent} from './modal.child.component';
 export class ParentComponent{
  private id: string;
 constructor(private dcl: DynamicComponentLoader, private injector: Injector) {}
   getContact() {
    this.id = 'Contact';
    this.dcl.loadAsRoot(ModalChildComponent, '#ContactModal', this.injector);
}
  }

modal.child.component

 import {Component, Input} from 'angular2/core';
 import {UserService} from '../services/data-services.service';
@Component({
selector: 'modal-child',
templateUrl: './views/templates/modalTemplate.html'
})
export class ModalComponent {
    @Input('id') modalId: string;
    private contactData: string;
  constructor(private _dataService: DataService) {
  console.log('id:' + this.modalId);
  if (this.modalId === 'Contact') {
      this.getContactData();
     }
  }
  getContactData() {
    this._dataService.getContact().subscribe(data => {
        console.log('contact:' + data);
        this.contactData = data;
    });
}
}

modalTemplate.html

<!-- Contact -->
 <div id="ContactModal" class="modal fade" role="dialog">
   <div class="modal-dialog">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Contact</h4>
        </div>
        <div class="modal-body">
            <div [innerHTML]="contactData"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

当我尝试上面的代码时，它会在组件'ParentComponent'的视图上给出异常，例如'Unexpected directive value'[object Object]'。有人可以指导我吗？

如何使用动态组件加载器在单击时实例化子组件？

0 个答案: