我一直在尝试在bootstrap4 beta上实现ng-bootstrap模式，但似乎无法从实际注入的其他示例中理解，如果我需要从app模块一直注入内容和组件。我举了一个例子 http://plnkr.co/edit/koPxsafjmUIhpXKY6rFC
我想从导航链接打开一个模态窗口，导航是app模块中的一个主要组件。模态是单独的组件，其中内容嵌入组件或作为模板加载。
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>ng-bootstrap demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://unpkg.com/core-js@^2.4.1/client/shim.js"></script>
<script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.8.10/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
这是app模块
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent} from 'src/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalComponent, NgbdModalContent } from './modal-component';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()],
declarations: [HomeComponent, NgbdModalComponent, NgbdModalContent],
entryComponents: [NgbdModalContent],
bootstrap: [HomeComponent]
})
export class AppModule { }
这是家庭组件
import {Component, OnInit} from '@angular/core';
import {ModalComponent} from '@src/modal-component';
@Component({
selector: 'my-app',
templateUrl: 'src/home.content.html'
})
export class HomeComponent implements OnInit {
constructor(private modal: NgbdModal) {}
openAbout() {
const modalRef = this.open(ModalComponent);
}
}
这是模态组件
import {Component, Input onInit} from '@angular/core';
import {NgbdModalContent, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-content',
template: `
<div #content class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalComponent implements OnInit {
constructor(public activeModal: NgbActiveModal ) {}
}
home.content.html上的调用是
<a class="nav-link" href="javascript:void(0)" target="_self" (click)="openAbout(content);" title="About Estate Management"><span
class="glyphicon glyphicon-ark-info-circle"></span><span class="d-md-none d-lg-inline">About</span></a>
有人可以帮我解决这个问题吗？