CSS 打开侧面板在 Angular 组件中不起作用

Question

我有一个简单的 Angular 应用程序，它有两个组件，一个 header 和一个侧面板。 header 中有一个菜单图标，单击它会显示侧面板。

当代码在 AppComponent 中时它可以工作。 但它不起作用，如果我将侧面板变成它自己的 Angular 组件（SidenavComponent）。 我正在使用“transform: translateX”来隐藏和显示面板。

这是一个stackblitz 工作场所，其中面板的代码位于 AppComponent 中并且正在运行。

这是另一个 stackblitz 工作场所，其中面板的代码位于 SideanavComponent 中并且无法正常工作。

单击菜单图标时，header 组件会向组件发送消息以打开面板。 这是工作代码中的 AppComponent 和非工作代码中的 SidenavComponent。 接收消息的组件然后应用 CSS class 打开面板。

当我在 Chrome 中运行它并打开开发人员工具时，相同的 CSS 会同时应用于工作和非工作侧导航 html。 所以我很困惑。

这最初是一个更大的应用程序的一部分。 我删除了所有与我遇到的问题无关的代码，然后将其移至 Stackblitz 工作场所。

注意：在 stackblitz 中运行时，工作代码和非工作代码都会出现控制台错误：“未处理的 Promise 拒绝”。 在 Chrome 中运行时不会发生这种情况，并且不会停止工作代码的工作。

Answer 1

所以问题是您创建了一个新的 Angular 组件，您希望它的行为与您在 AppComponent html 页面中运行的<aside>元素相同，对吧？

但是然后在您的 sidenav 组件中，您将 go 放在前面，并在新组件中放置一个带有 sidenav class 的新<aside>元素。 你看到这里的问题了吗？ 您现在有了一个元素（组件元素），它有自己的 css 规则，位于父元素和 sidenav 元素之间。

要解决此问题，您需要将 sidenav 组件视为元素本身。 这意味着您需要进行一些更改。

了解如何将 css 应用到组件本身（这是诀窍：它在 scss 文件中称为：host）。

https://angular.io/guide/component-styles

对于动态更改组件的类，请使用 @HostBinding

https://angular.io/api/core/HostBinding

使用这两种技术，您可以从 sidenav 组件中删除<aside>元素，组件本身将按照您想要的方式运行。

我用一个工作示例分叉了你的 stackblitz 工作场所：

https://stackblitz.com/edit/angular-5gl3cu?file=src/app/sidenav/sidenav.component.ts