Je veux quelque chose comme

<my-row>
  <my-col>Content</my-col>
  <my-col>Content</my-col>
</my-row>

Où les divs avec les classes bootstrap sont à l'intérieur de mes composants. Je sais que cela a fonctionné avec Bootstrap 3, mais le dernier bootstrap utilise Flexbox et des composants de style en ligne autour des cols semblent casser les styles.

<div class="row">
  <span>
    <div class="col-md-6">Content</div>
  </span>
  <span>
    <div class="col-md-6">Content</div>
  </span>
</div>

L'étendue dans cet exemple rompt également la disposition. Existe-t-il un moyen de faire fonctionner ma structure de composants comme une grille?

0
Adrian Brand 12 mars 2021 à 07:07

2 réponses

Meilleure réponse

Je l'ai résolu avec un HostBinding.

@HotstBinding('class')
classes: string;

@Input()
set gridClasses(classes: string) {
  this.classes = classes;
}

Et je peux utiliser l'entrée pour définir les classes sur le sélecteur de composants maintenant.

0
Adrian Brand 13 mars 2021 à 01:41

Après avoir correctement installé bootstrap et toutes les dépendances nécessaires, vous pouvez essayer quelque chose comme ça.

J'ai essayé de créer trois composants différents, un pour le conteneur, un pour la ligne et un autre pour la colonne.

container.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-container",
  template: `
    <div class="container">
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
      :host {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
      }
    `
  ]
})
export class ContainerComponent {}

row.container.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-row",
  template: `
    <div class="row">
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
      :host {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
      }
    `
  ]
})
export class RowComponent {}

column.container.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-column",
  template: `
    <div class="col-6">
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
      :host {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
      }
    `
  ]
})
export class ColumnComponent {}

Dans le composant de colonne, vous pouvez également définir des propriétés d'entrée pour gérer différents points d'arrêt (sm-md-lg).

Tous les composants doivent être déclarés dans un module, vous pouvez créer un module spécifique pour le système Grid, puis déclarer les composants de ce module et enfin vous pourrez importer le module avec vos composants où vous le souhaitez.

grid.module.ts

import { NgModule } from "@angular/core";

import { RowComponent } from "./row.component";
import { ContainerComponent } from "./container.component";
import { ColumnComponent } from "./column.component";

@NgModule({
  declarations: [RowComponent, ContainerComponent, ColumnComponent],
  exports: [RowComponent, ContainerComponent, ColumnComponent]
})
export class GridModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { GridModule } from "./grid/grid.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GridModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

De cette façon, vous pourrez utiliser votre propre composant dans app.component.html, par exemple:

app.component.html

<my-container>
  <my-row>
    <my-column>Column 1</my-column>
    <my-column>Column 2</my-column>
    <my-column>Column 3</my-column>
  </my-row>
</my-container>

Bien sûr, vous pouvez donner à vos composants tous les accessoires dont vous avez besoin.

Pour être précis, mon dossier racine a une structure comme celle-ci:

 - your-project
  - src
   - app
    - grid
     - container.component.ts
     - row.component.ts
     - column.component.ts
     - grid.module.ts
    - app.component.ts
    - app.component.html
    - app.module.ts
-1
Federico Baldini 12 mars 2021 à 11:30