在Angular中打开弹出窗口时更改其他组件CSS

Question

我正在寻找有关Angular父/子样式组件的帮助。

在Angular页面上，我有一个弹出窗口。打开弹出窗口后，我需要更改页面的CSS。

这是页面结构的架构：

你可以看到

• 具有用于菜单的其他组件的父页面。

• 该弹出窗口由2个组件定义：

  1. 有关布局和基本弹出窗口的结构
  2. 内容（我们有很多机会）

打开弹出窗口内容时，我需要更改组件的菜单样式和弹出窗口结构样式，以更改弹出窗口在页面中的位置。

我该如何实现？

这是我的弹出路线的示例（路径动画是我的弹出窗口）：

{
    path: 'account',
    component: AccountComponent,
    canActivate: [AuthGuard, AccountGuard],
    children: [
        {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
        {path: 'dashboard', component: DashboardComponent, children: [
                {path: 'animation', component: BaseAnimationTemplateComponent , children: [
                  {path: 'menu', component: AnimationAccountMenuComponent},
                ]}
            ]},
    ]
},

Answer 1

一个有角组件的CSS彼此隔离，只会影响自己的组件。但是您可以使用::ng-deep之类的选择器将CSS应用于子组件。

在您要更改父组件CSS的情况下，建议您在服务中或父组件中的某个位置创建布尔popupOpened布尔值，并在需要的任何地方使用它而不是将CSS应用于用简单的<app-my-popup *ngIf="!!popupOpened"></app-my-popup>

显示或不显示您的弹出窗口