Angular2, générique superposition composant pour tous les autres composants à l'intérieur de l'app

J'ai les deux composants suivants:

superposition

@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 (il y a beaucoup plus de ce genre)

@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 {

}

Ces solutions ne fonctionne pas sans erreurs jeté, Angular2 simplement saute les deux composants de l'initialisation. De toute façon, je pense que vous obtenez l'idée. Il y a un élément commun qui aura besoin d'envelopper beaucoup d'autres composants, par conséquent, il doit être générique. Il a un template de sorte que les services ne pas faire le travail. Je n'ai pas beaucoup travaillé avec des annotations personnalisées, peut-être qu'ils pourraient faire quelque chose comme cela? Toute réflexion sur la manière de parvenir à cette fonctionnalité?

remarque: la superposition contient la logique et le modèle, qui sont tous deux nécessaires à un autre composant qui a besoin de l'utiliser. Le modèle est un complexe de dialogue modale, avec des animations, des messages, des fondus etc... qui est commun à travers la solution.

Mise à jour

Trouvé ceci: Angular2: le progrès, le chargement, la superposition de la directive

Pourquoi ne pas utiliser attribut/structurelle des directives? Vous pouvez costomize le comportement de votre composant par liaison de données pour que la directive et la réutilisation de cette directive
Dans ce cas, un bootstrap modal doit être montré et enlevé. Il a un contenu comme je l'ai mentionné, alors, comment un directive de stocker et d'afficher ce contenu?

OriginalL'auteur RoninCoder | 2016-06-21

  1. 2

    Ok peut-être que ce n'est pas une réponse directe à votre question, mais à partir de votre commentaire, je suppose que vous voulez mettre en œuvre des modaux à l'intérieur de votre application. Je ne l'ai pas fait, mais encore dans un avenir proche je vais (c'est la partie de mon application de l'exigence).

    D'abord je ne suis pas d'utiliser bootstrap javascript parce que je suis en utilisant angulaire déjà. La seule chose que vous avez besoin est de bootstrap css.

    considérer au-dessous de la racine modèle:

     <my-app></my-app>

 <my-modal>
    <div class="modal-container">
       <div class="modal-content">{{modalContent}}</div>
    </div>
 </my-modal>

    montrer votre modal: Événement Mondial

    Vous pouvez montrer votre modal de toute component. L'astuce consiste à injecter un modal-service pour envoyer un événement mondial. voir cette réponse pour voir comment il fonctionne.

    Vous pouvez envoyer n'importe quel objet comme event. Cet événement objet contient votre modale du contenu ou de l'un key donc modal component pouvez chercher où ailleurs.

    ModalComponent

    Votre ModalComponent devez vous abonner à l'événement. Sur l'événement vous pouvez afficher et masquer (la composante modale) de plusieurs façons que je suis sûr que vous êtes conscient de. À l'aide de structurels directives est une.

    Style

    Modal est un conteneur (.modal-container) avec width et height de fenêtre d'affichage avec un fond transparent. Modale du contenu (.modal-content) est un autre récipient fixe width et height et absolute position. Si vous voulez bootstrap styles vous pouvez l'ajouter et pour les animations, vous pouvez utiliser angulaire des animations

    Je suis actuellement en utilisant une approche similaire pour la barre de menu et ça fonctionne très bien!!

    Bon travail, j'ai trouvé une solution que je vais poster quand je suis fait avec. Beaucoup plus simple et plus propre, aussi je n'ai pas forcément besoin de bootstrap modal à tous, grâce à la variété de raisons que je vais parler dans mon prochain post.

    OriginalL'auteur Seyed Jalal Hosseini

  2. 1

    J'ai créé un pour cette tâche spécifique et de la pensée sur l'incorporation de bootstrap modale en tant que modèle, mais est tombé sur un couple de questions telles que le fait que la seule pièce utile de bootstrap modal serait la classe des noms. Il n'est pas surprenant, ne voulait pas que pour cette tâche depuis que j'nécessaire de faire la distinction entre la fenêtre des modaux et les progrès des modaux sur les composants.

    Superposition

    @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);
}
}
}

    Utilisation

    Comme il est, vous aurez besoin d'un parent conteneur pour overlay pour remplir son parent. Le css certainement besoin de modifications pour prendre en compte quelques-uns des scénarios tels que les appareils mobiles et non-placés dans des conteneurs. Voici comment il est utilisé actuellement:

    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>

    Après l'enregistrement de l' form, un overlay est indiqué dans le containerElement pour 400ms et est disparu et va cachée par la suite jusqu'à la prochaine tentative de sauver. Le isSaving et isSaved des valeurs contraignantes sont de la responsabilité de tout élément qui souhaite utiliser l' overlay.

    Où est le AnimationBuilder classe importés? Est-il '@angulaire/animations"? J'obtiens l'erreur "propriété css n'existe pas sur le type de AnimationBuilder". Ou ai-je raté quelque chose?

    OriginalL'auteur RoninCoder