如何在离子4中添加ION-MENU的CSS，因为没有app.css可用

Question

我想设计ion-menu并在菜单中实现CSS，但是在这里我们编写我没有得到的CSS，因为没有app.cs.cs.css。我想添加类别和内部，我想添加子类别，但要从Web服务中添加。如何做到这一点，请帮助我。

我已经尝试过，但是我能够显示菜单选项静态而不是动态的，我将从API中获得。请指导我该怎么做。

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let p of pages">
        <ion-menu-toggle *ngIf="p.url">
          <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
            <ion-icon [name]="p.icon" slot="start"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
          style="font-weight: 500;" detail="false">
          <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
          <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </ion-item>
        <ion-list *ngIf="p.open">
          <ion-menu-toggle>
            <ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
                  font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
              style="--ion-text-color: var(--ion-color-primary);">
              <ion-icon [name]="sub.icon" slot="start"></ion-icon>
              <ion-label>
                {{ sub.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </div>
    </ion-content>
  </ion-menu>
  <ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>

我希望动态数据在侧菜单中显示并设计侧菜单。

app.component.ts

pages = [
    {
      title: 'Main',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Categories',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'arrow-dropright'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'arrow-dropright'
        }, {
          title: 'Your Orders',
          url: '/your-orders',
          icon: 'arrow-dropright'
        }, {
          title: 'My Profile',
          url: '/profile',
          icon: 'play'
        }
      ]
    }, {
      title: 'Offers',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'play'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'play'
        },
      ]
    }, {
      title: 'LogOut',
      url: '/user-login',
      icon: 'log-out'
    }
  ];

Answer 1

使用样式下面 ion-content

例如，这将使您的离子 - 菜单背景黑色。

<style>
   ion-content{
    background:black;
  }
</style>

Answer 2

您可以在src目录中添加app.componet.scss。而且您必须将StyleRls添加到组件装饰器中，如下所示：

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None })