我有以下两个组成部分:
覆盖
@Component({
selector: 'overlay',
template: '<div class="check"><ng-content></ng-content></div>'
})
export class Overlay {
save(params) {
//bunch of stuff that are commonly used
}
}
myComponent(还有更多这样的内容)
@Component({
selector: 'myComponent',
directives: [Overlay],
template: '<overlay><form (ngSubmit)="save({ name: 'sam', lastName: 'jones' })">I'm the component. Click <input type="submit">Here</input> to save me!</form></overlay>'
})
export class MyComponent {
}
这个解决方案没有抛出任何错误,Angular2只是跳过两个组件初始化。无论如何,我想你在这里得到了这个想法。有一个共同的组件需要包装许多其他组件,因此它需要是通用的。它有一个template
所以服务不起作用。我没有使用自定义注释,也许他们可以做这样的事情?有关如何实现这种功能的任何想法吗?
注意:叠加层包含逻辑和模板,这些都是需要使用它的任何其他组件所需的。该模板是一个复杂的模态对话框,包含动画,消息,淡入淡出等......在整个解决方案中很常见。
更新
答案 0 :(得分:2)
好吧也许这不是你问题的直接答案,但是从你的评论中我想你想在你的应用程序中实现模态。 我还没有做到但是在不久的将来我会(这是我应用程序要求的一部分)。
首先我不使用bootstrap javascript ,因为我已经使用了angular。你唯一需要的是bootstrap css 。
考虑以下根模板:
<my-app></my-app>
<my-modal>
<div class="modal-container">
<div class="modal-content">{{modalContent}}</div>
</div>
</my-modal>
您可以从任何component
显示您的模态。诀窍是注入modal-service
来发送全局事件。请参阅this回答,看看它是如何运作的。
您可以将任何对象发送为event
。此事件对象可能包含您的模态内容或key
,因此模态component
可以从其他位置获取它。
您的ModalComponent
应订阅该活动。在事件中,您可以通过几种我确定您知道的方式显示和隐藏它(模态组件)。使用结构指令是一种方式。
模式是一个容器(.modal-container
),其中width
和height
的视口具有透明背景。模态的内容(.modal-content
)是另一个具有固定width
和height
以及absolute
位置的容器。如果您想要自举样式,可以添加它,对于动画,您可以使用angular animations
我现在对菜单栏使用类似的方法,效果非常好!!
答案 1 :(得分:1)
我为这个特定的任务创建了一个,并考虑将bootstrap模式作为模板嵌入,但遇到了一些问题,例如,bootstrap模式中唯一有用的部分是类名。毫不奇怪,因为我需要区分窗口模态和组件上的进度模态,所以不希望这个特定的任务。
<强>重叠强>
@Component({
selector: 'overlay',
template:
`<div [ngClass]="isOpen ? 'opened' : 'closed'">
<div class="modal" role="dialog">
<div class="modalBody">
<div *ngIf="isSaving">
<span class="text-success text-bold">
Saving...
</span>
</div>
<div *ngIf="isSaved">
<span class="text-success text-bold">
Saved.
</span>
</div>
</div>
</div>
</div>`,
styles: [
'.modal { position:absolute; width: 100%; height: 100%; margin: -30px; background-color: rgba(255, 255, 255, 0.7); z-index: 1000; text-align: center; }',
'.closed { visibility: hidden; }',
'.opened { visibility: visible; }',
'.modalBody { top: 45%; left: 25%; width: 50%; position: absolute; }',
'.text-bold { font-weight: 800; font-size: 1.5em; }'
]
})
export class Overlay implements OnChanges, AfterContentInit {
@Input() isSaving: boolean = false;
@Input() isSaved: boolean = false;
@Input() containerElement: HTMLElement;
isOpen = false;
private modalElement;
constructor(private element: ElementRef, private animationBuilder: AnimationBuilder) { }
ngOnChanges() {
if (this.modalElement) {
if (this.isSaving == true || this.isSaved == true) {
this.toggleAnimation(true);
}
else if (this.isSaving == false && this.isSaved == false) {
this.toggleAnimation(false);
}
}
}
ngAfterContentInit() {
this.containerElement.style.position = 'relative';
this.modalElement = this.element.nativeElement.querySelector('.modal');
}
private toggleAnimation(isOpen) {
var startCss = { backgroundColor: 'rgba(255, 255, 255, 0)' };
var endCss = { backgroundColor: 'rgba(255, 255, 255, 0.7)' };
if (isOpen) {
this.isOpen = true
this.animation(
true,
this.modalElement,
400,
startCss,
endCss,
null
);
}
else {
this.animation(
isOpen,
this.modalElement,
400,
startCss,
endCss,
() => {
this.isOpen = false;
}
);
}
}
private animation(isStart, element, duration, startCss, endCss, finishedCallback) {
var animation = this.animationBuilder.css();
animation.setDuration(duration);
if (isStart) {
animation.setFromStyles(startCss).setToStyles(endCss);
} else {
animation.setFromStyles(endCss).setToStyles(startCss)
}
animation.start(element);
if (finishedCallback) {
setTimeout(finishedCallback, duration);
}
}
}
用法的
按原样,您需要一个相对容器,以便overlay
填充其父级。 css肯定需要修改以适应一些场景,例如移动设备和非定位容器。以下是它目前的使用方式:
<强> HTML 强>
<form action="/edit" method="post" #myForm="ngForm" (ngSubmit)="save ajax method that will update the isSaving and isSaved accordingly" novalidate>
<div style="position: relative;" #overlayContainer>
<overlay [isSaving]="isSaving" [isSaved]="isSaved" [containerElement]="overlayContainer"></overlay>
</div>
</form>
保存form
后,overlay
内会显示containerElement
400毫秒,然后逐渐淡出并隐藏,直到下一次保存尝试。 isSaving
和isSaved
绑定值是希望使用overlay
的任何组件的责任。